JavaScript Paragraph Toggle

By Jonesy44 on Jun 25, 2008

I used this function on my latest website, found it came in handy and looked real nice;
Put this into any html page, the put this code for the bit that's to be toggled;

<p id="pname" style="display:none;">This is my shitty text lolz</p>

Now there's the paragraph, you need a link to toggle it visible, or not.

<a href="Javascript:toggle('pname');">Link Text</a>

This is REALLY effective when you use CSS with it, and it looks really pro :P

<script type="text/javascript">
function toggle(obj) {
  var toggle = document.getElementById(obj);
  if (toggle.style.display != "none") {
    toggle.style.display = "none";
  }
  else {
    toggle.style.display = "inline";
  }
}
</script>

Like Page Follow Author

Comments

Jonesy44 - Oct 05, 2008

Respond

Sir_Sonic12 - Oct 05, 2008

Could you give me an example of how to call that? I'm not very good at Javascript but really want to use this code <_<

Respond

Jonesy44 - Oct 05, 2008

It is possible, what i'd do (bearing in mind that i am not very good at javascript) is while loop to close them all then open a single one. for example

function collapse(open) {
  for (x=1;x<=[NUMBER_OF_PARAGRAPHS];x++) {
    document.getElementById("objectname" + x).style.display = "none";
  }
  document.getElementById("objectname" + open).style.display = "inline";
}

Hope that helps!

Respond

Sir_Sonic12 - Oct 04, 2008

I've just found this, and it's just what I need. I was wondering if there's any way to make it so if you have more than one thing being toggled, and one of them is open already and you go and open another one, it auto closes any that are open?

Respond

vaseline28 - Jun 29, 2008

It\'s OK thanks, I\'m using Hawkee\'s snippet just now, but thanks for the offer!

Respond

F*U*R*B*Y* - Jun 29, 2008

so just like that???

how about you show me EXACTLY what you have.........

Respond

vaseline28 - Jun 29, 2008

I have tried both.

Respond

F*U*R*B*Y* - Jun 28, 2008

so you have

<div>Code & text here</div>

Code here
<div> text here</div>

or what?

????

Respond

vaseline28 - Jun 28, 2008

Simple as what I said, I tried to put it within

tags and no text showed up. It seems to have not worked for jonesy44 either.

Respond

F*U*R*B*Y* - Jun 26, 2008

vaseline,

regarding the \"doesn\'t seem to work when within

tags\" i just tried it and it worked, perhaps post what you were trying and we could help

Respond

Jonesy44 - Jun 26, 2008

No, i found it only worked with

not sure about and as you say, doesnt work with

I\'ll check it out and get back to you, but i am a JS idiot lol.

You could put the link text within a

so for instance;

<p id=\"paralink\" style=\"display:inline;\"><a href=\"Javascript: toggle(\'para\'); toggle(\'paralink\');\">Toggle</a></p>
<p id=\"para\" style=\"display:none;\">This is my shitty text lolz</p>

that should work.

Respond

vaseline28 - Jun 26, 2008

Excellent Script! Just what I was looking for on my website, but a few points:

A: Does not seem to work when within

tags
B: Is there anyway to hide the link text when it is clicked?

9/10 If there\'s a solution to those, 10 straight away!

Respond

F*U*R*B*Y* - Jun 25, 2008

Nice. I have used this method on my forums already but never the less nice

8/10 - Someone will find this very useful, i would if i hadn\'t already done it ;)

Respond