CODEWITHSUNDEEP
jquery
user1231561
user1231561

Reputation: 3359

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>

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

Upvotes: 1

Views: 27706

Answers (5)

David
David

Reputation: 270

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

Upvotes: 3

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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

Upvotes: 0

Alex
Alex

Reputation: 7374

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>

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72652

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

Upvotes: 0

Dim_K
Dim_K

Reputation: 571

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

Upvotes: -2

Related Questions