Javascript Show/Hide debug

computerhakk

computerhakk

VIP Member
I know there are a few Javascript writers, I hope you guys can help me sort this code out.

What the code is basically doing now is instead of hiding the text.. it is showing the text. So whenever you go onto the page, instead of you clicking on the text to show first, it is already shown. If you click on it, then it'll hide. Which is the opposit of what I want. I wanted it to hide first.

The code is:
Code: 
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
To make it work, you need this:
Code: 
<a href="#" onclick="toggle_visibility('ID');">The id</a><div id="ID">This is the id</div>
All that will go into the <body> tag

Here is an example of what I roughly want it to do:
http://moofx.mad4milk.net/

Basically, if you click on the Green titles (which in this case is the show/hide buttons).. it shows shows the text. Then it hides the others.

What is happening with the code above is that instead of hiding, everything is showing.
 
Last edited:
in the line:

Code: 
[LEFT]<a href="#" onclick="toggle_visibility('ID');">The id</a><div id="ID">This is the id</div>[/LEFT]

add: style="display:none" to the opening <div> tag attributes so the line is:

Code: 
<a href="#" onclick="toggle_visibility('ID');">The id</a><div style="display:none" id="ID">This is the id</div>
 
Awesome! Thanks SFR.

Now I have one more slight bug. Whenever I click on it to show/hide so that it will show or hide the text, it automatically moves back up to the top of the page. Like an automatic refresh and you will have to scroll down to the show/hide text again.

Also, would you know how to make it so that the others hide while one of them is showing. So like I will have 5 instances of the show/hide script running on one page like the moo.fx link provided above. If I click on one, I want the others to hide.

Thanks.
 
Last edited:
computerhakk said:
Awesome! Thanks SFR.

Now I have one more slight bug. Whenever I click on it to show/hide so that it will show or hide the text, it automatically moves back up to the top of the page. Like an automatic refresh and you will have to scroll down to the show/hide text again.

Also, would you know how to make it so that the others hide while one of them is showing. So like I will have 5 instances of the show/hide script running on one page like the moo.fx link provided above. If I click on one, I want the others to hide.

Thanks.
Click to expand...


For your first question, you might try an anchor. For the second question, all you have to do is change in the <a> tag: onclick="toggle_visibility('ID2');" (change from ID to ID2) and in the <div> tag: id="ID2" (from ID to ID2)
 
SFR said:
For your first question, you might try an anchor. For the second question, all you have to do is change in the <a> tag: onclick="toggle_visibility('ID2');" (change from ID to ID2) and in the <div> tag: id="ID2" (from ID to ID2)
Click to expand...
Thanks. I figured out the first question by just deleting the # in the href tag.

For the second, unfortunately it isn't working for me.

So it will look like this right?

Code: 
<a href="#" onclick="toggle_visibility('ID2');">The id</a><div id="ID2">This is the id</div>
So if I had for example, 5. The first will be ID, second ID2, ID3, etc.. right? I had it like that and tried, but it wasn't showing correctly either.
 
You must log in or register to reply here.
Back
Top