Jquery toggle hidden - help

[leafer]

I've been at this on and off for a week but it never seems to work quite right.

 

Basically I have multiple divs that are hidden preceded by a button before each one but it has to start hidden on load. All I want is any of the buttons to only open the div directly after it. At the moment it seems to want to open all of them.

 

Here is the snippet of code:

 

<div class="buttonClass"><button class="ForumButton" type="button">Click to open</button></div><div class="forumPaster">Hidden information</div>

 

Here's what I have so far:

 

$(document).ready(function()  {

$(".forumPaster").hide();

$(".ForumPasteButton:button").bind('click', function() {

$(".forumPaster").toggle();

});

});

 

 

 

[cbolson]

Hi,

It is opening all the hidden elements because that is what you are telling it to do.

In the same way that you have used $('.forumPaster').hide(); to hide them all, you are using the same code when you want to open just one.

Either you need to address each hidden layer individually by using a unique id, or you could try to get the "next" layer after the button.

 

I am not familar with jquery, personally preferring mootools, but you could try something like this:

$(document).ready(function()  {
  $(".forumPaster").hide();
  $(".ForumPasteButton:button").bind('click', function() {
    this.next(".forumPaster'").toggle();
  });
});

As I say, I don't know jquery code that well but this, or an adaption of this should work.

 

Chris

[leafer]

I even tried something like this:

 

$(document).ready(function()  {

$(".forumPaster").hide();

$(".ForumPasteButton:button").bind('click', function() {

$(".forumPaster").each(function(){

$(this).toggle();

});

});

});

 

Nothing. I can't seem to find anything that says only the next one only.