Javascript 'toggle content' script help needed.

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Hey, recently I checked out the 'toggle content' javascript code on Boomer's great site (yolacodes.yolasite.com) and I'm having some trouble on it- (here's link)
http://www.randomsnippets.com/2008/02...
I need help in this:

How can I make many toggle contents? Because I insert one, then another and on the second when clicked it opens the first's content! Any way to fix this?
Thanks
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes

Posted 8 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Mike

We can take a look and see if we can help. Do you have an example of the way you used the code on your site? Which of the code snippets did you use?

Nazlie
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Mike,

I am familiar with this code and was the person who implemented it on the Yola Code site. I am confident that we can get this sorted out. Do you mind sharing your URL and if I can enter your Sitebuilder to see if I can get this figured out?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mike,

There is actually a better code for this than the one you have that will make it easier for you. Here it is:



<!--

<script type="text/javascript">
function toggleMe(divId) {

if (document.getElementById(divId).style.display=='none') {
document.getElementById(divId).style.display='block';
}

else {
document.getElementById(divId).style.display='none';
}
}
</script>

<a href="#" onclick="toggleMe('toggleDiv');return false;">Click here to show/hide div</a>

<br />
<br />

<div id="toggleDiv" style="display:none">
This is the text to be toggled! If you see this, it worked!
</div>

-->



You can use this and make multiple divs be toggle-able.

If you want to make another div on a page be toggle-able, just change 'toggleDiv' in the onclick and in the div id="" part to make it work. If you wanted div #toggleDiv2 to be toggle-able, here is that code:



<!--

<script type="text/javascript">
function toggleMe(divId) {

if (document.getElementById(divId).style.display=='none') {
document.getElementById(divId).style.display='block';
}

else {
document.getElementById(divId).style.display='none';
}
}
</script>

<a href="#" onclick="toggleMe('toggleDiv2');return false;">Click here to show/hide div</a>

<br />
<br />

<div id="toggleDiv2" style="display:none">
This is the text to be toggled! If you see this, it worked!
</div>

-->



As you can see, I just changed the 'toggleDiv2' which is the ID in both the div id="" and the a onclick="". You can change 'toggleDiv2' to anything you want, as long as the

a onclick="toggleMe('toggleDiv2')"

and the

div id="toggleDiv2"

(bold parts) match up.

So when you click on the link, it will toggle the div specified in the onclick! If you need any assistance or if you are confused please let me know. If you're confused, just copy the first code and paste it in (without the <!-- and-->) and it will work.

I hope this is helpful.

Nathan
Photo of Mike

Mike

  • 192 Posts
  • 4 Reply Likes
Thanks Nathan. Knew I could always cont on you when scripts are involved. :)
Photo of Sarah O'Reilly

Sarah O'Reilly

  • 14 Posts
  • 1 Reply Like
I know this is old But This has just solved a day of stress!especially when Im knew to all this!Thank you adding &#9662 next to visable text will create an arrow pointing down. Thanks again!