Jquery toggle - expand / collapse on multiple divs

I recently found some very easy to use Jquery code, which basically toggles and div visible and not visible.

The code is working on the first div - but lets say I have multiple with the same structure listing down, and I want the toggle to work on the specific second or third div im clicking.

Im wondering if it's possible to expand the following code to be dynamic for that.

Example with two divs (only first one will work):

<a id="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div&g开发者_如何学Pythont;

<br><br>

<a id="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div>

Jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads 
{ 
  $("#toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $("#content, #contentHidden").toggle(); 
  }); 
});

First, an Id should be unique on each DOM tree object. (multiple div with id="toggle" would eventually work but is not recommanded. Prefer the class attribute in this case.)

for your problem I suggest :

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div>

and the jQuery code :

$(function()
{
    $(".toggle").click(function() 
    {  
        // hides children divs if shown, shows if hidden 
        $(this).children("div").toggle(); 
    }); 
});

First: you can't use the same id (toggle) multiple times.

<a class="toggle" href="#">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="#">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div>

$('.toggle').click(function() {
  var content = $(this).next();
  $(content).toggle();
  $(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it's a matter of taste
  return false;
});

I've changed toggle id to class since it is not valid HTML to re-use the same id on the page. Id's must be unique.

.next() selects the next dom element (sister) in the tree

The id attribute should be unique. You need to change it to a class:

$(function() // run after page loads 
{ 
  $(".toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle(); 
    $(this).next().next().toggle(); 

    return false;
  }); 
});

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div>Content 1</div> 
<div style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div>Content 2</div> 
<div style="display:none;">Hidden 2</div>

Fist of all you must not use ids more than once: in this case only one works because the event is attached only on the first matching id.

Anyway you could do like this:(http://jsfiddle.net/7Kmny/)

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div>
  $(".toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle();
    $(this).next().next().toggle();
  }); 

It works only with first div because id must be unique on page. You should use classes to work with multiple tags.

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div>
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>

Jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads 
{ 
  $(".toggle").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $(".content, .contentHidden", $(this).next()).toggle(); 
  }); 
});