Independant JS Code for HTML show/hide divs

Hello Site Point! ^,^

I’m trying to implement a show/hide toggle for each users profile field in the view body topic of my forum.

I found this thread here @ sitepoint which is close to what I’m working on, but the code I’m working with is different.

What I need are some changes to the JS so that each show/hide works independently, not just the first instance of the show/hide.

how do you call this HTML

<center><p>...show/hide testing...<br>
<a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;"> [SHOW] </a>
</p></center>
<div id="example" class="more">
<center><p>...hidden content...</p>
	<p><a href="#" id="example-hide" class="hideLink" 
	onclick="showHide('example');return false;"> [HIDE] </a></p></center>
</div>

with this JS to be independent?

function showHide(shID) {
	if (document.getElementById(shID)) {
		if (document.getElementById(shID+'-show').style.display != 'none') {
			document.getElementById(shID+'-show').style.display = 'none';
			document.getElementById(shID).style.display = 'block';
		}
		else {
			document.getElementById(shID+'-show').style.display = 'inline';
			document.getElementById(shID).style.display = 'none';
		}
	}
}

I know that this would have bits of " $(function() and $(this) " but that’s about all I know…

Please help my brain is sore from giving it my best effort. :confused:

forum is PUNBB/forumotion same as my name .com

I don’t understand what you mean there. Could you elaborate?

@Paul - I am truly honored by your response.

To elaborate, only the top (or first) show/hide works, all other show/hides only toggle the top (or first) show/hide.

I’m ‘trying’ to get each one to work independently as they will appear below the avatar of each users post.

here is a screen shot (it’s below “connected” and above the icons)

once this is working, I then can hide all the profile details inside the show/hide

(such as the flag,OS,browser)

edit: to see it in action ~>http://gameface101.playogame.com/t1008-hello-everyone

I figured it out! ^,^

my brain still hurts but my mind is at ease (iykwim…)

edit:had to use a totally different CSS/and JS function but it works.

*still I would like to use the code in this request if possible, I like how it looks more…

** sorry about the double post, I just couldn’t edit the previous post for some odd reason ~?

I’ve used this to hide and show elements:

    function doHide(elementId){
        document.getElementById(elementId).style.display = 'none';
    }
    function doShow(elementId){
        document.getElementById(elementId).style.display = 'block';
    }
    function doShow_inline(elementId){
        document.getElementById(elementId).style.display = 'inline';
    }

I’m not quite sure if that’s what you’re looking for or not.

@forceflow - ^ thanks for sharing! +
Though I think that code would not work as you would have to assign an ID for each element to toggle, I really do appreciate your response. ^,^

I was trying to get the HTML code in the original post of this thread to work independently which is why I was looking for an edited solution to the JS.

As I was trying to explain to Paul, the div appears below the avatar of each post, no matter the number of posts in a thread all show/hide divs will only toggle the top or first show/hide div. I’m looking to toggle each one independently. I was able to find a temporary solution with less features, but I still would prefer getting this one to work.

Can you explain a bit more on what you mean by this? I’m not the only one confused about what you’re attempting to do.

The reason why we are puzzled is that we think that the scripting code is already independent.

See this HTML code, with the following CSS to initially hide them:


.more {
    display: none;
}


<center><p>...show/hide testing...<br>
<a href="#" id="first-show" class="showLink" onclick="showHide('first');return false;"> [SHOW] </a>
</p></center>
<div id="first" class="more" style="display: none;">
<center><p>...first hidden content...</p>
	<p><a href="#" id="first-hide" class="hideLink" onclick="showHide('first');return false;"> [HIDE] </a></p></center>
</div>
<center><p>...show/hide testing...<br>
<a href="#" id="second-show" class="showLink" onclick="showHide('second');return false;"> [SHOW] </a>
</p></center>
<div id="second" class="more" style="display: none;">
<center><p>...second hidden content...</p>
	<p><a href="#" id="second-hide" class="hideLink" onclick="showHide('second');return false;"> [HIDE] </a></p></center>
</div>
<center><p>...show/hide testing...<br>
<a href="#" id="third-show" class="showLink" onclick="showHide('third');return false;"> [SHOW] </a>
</p></center>
<div id="third" class="more" style="display: none;">
<center><p>...third hidden content...</p>
	<p><a href="#" id="third-hide" class="hideLink" onclick="showHide('third');return false;"> [HIDE] </a></p></center>
</div>

Although, I would prefer to remove those inline onclick events, and assign them from scripting instead:


var links = document.getElementsByTagName('a'),
    i,
    link;
for (i = 0; i < links.length; i += 1) {
    link = links[i];
    if (link.className === 'hideLink' || link.className === 'showLink') {
         link.onclick = function () {
            var id = this.href.split('#')[1]; 
            showHide(id);
            return false;
        }
    }
}

And I would also prefer to remove those <center> tags and use CSS instead:


body {
    text-align: center;
}

which results in the following HTML code:


<p>...show/hide testing...<br>
    <a href="#first" id="first-show" class="showLink"> [SHOW] </a>
</p>
<div id="first" class="more">
    <p>...first hidden content...</p>
    <p><a href="#first" id="first-hide" class="hideLink"> [HIDE] </a></p>
</div>
    <p>...show/hide testing...<br>
        <a href="#second" id="second-show" class="showLink"> [SHOW] </a>
    </p>
<div id="second" class="more">
    <p>...second hidden content...</p>
	<p><a href="#second" id="second-hide" class="hideLink"> [HIDE] </a></p>
</div>
<p>...show/hide testing...<br>
    <a href="#third" id="third-show" class="showLink"> [SHOW] </a>
</p>
<div id="third" class="more">
    <p>...third hidden content...</p>
	<p><a href="#third" id="third-hide" class="hideLink"> [HIDE] </a></p>
</div>

There are other things that can be done to simplify things even further, but this should be enough to demonstrate the independent nature of things.

@Paul - I appreciate your response! It was more difficult for me to explain what I needed than it was to find a way to program it. ^,^

In your results I see the CSS initial hide for the HTML divs having the ‘more’ class then the JS toggles the ‘hidelink’ ‘showlink’ classes.

I’ll be certain to give this code a try, thanks a lot!

thank you too Force Flow, just for confusions sake… allow me to clarify once more.

Forum > Topic Thread

[ 1 ] <— avatar first/top post
=== <— profile field toggle (below avatar)

[ 2 ]
=== <— only toggles the profile field in first/top post

[ 3 ]
=== <— only toggles the profile field in first/top post

*using the code in the original post of this thread,
I was only able to toggle the profile field below the first/top post for every thread in my forum.

I tend to over think and make things more complicated (a lot), but I was able to keep it simple and I figured it out.

*still it is not hidden on load, the hidden divs will show for a split second then hide (permissions would be nice too…)

Any how, this is what I did;

  • I created 1 div with a class ‘xo_box’,
  • a hidden class ‘x’ (set to display none in CSS )
  • a visible class “o” (set to display block in CSS )

then I used the JS to toggle the div with the ‘xo_box’ class
by adding / removing the hidden/visible classes

JS



$(document).ready(function(){

$('.xo_box').addClass("x");

$('.xo_box').click(function() { var $this = $(this);

if ($this.hasClass("x")) { $(this).removeClass("x").addClass("o");

} else { $(this).removeClass("o").addClass("x"); } }); });  


if you want to see it in action ~> the first word you think of

thanks again for your responses and help.