Question

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>

<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(); 
  }); 
});

Answer 1

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(); 
    }); 
});