CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ghostff
Ghostff

Reputation: 1458

jQuery Multiple Toggle

My problem is that i have 2 jquery toggle, the upper one works perfectly why the lower one's doesn't respond because of the HTML repetition is there any way to make all of them work without changing the class or id (eg: i don't want to be changing code each time i need a toggle)

JS

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<p>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<p>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

Fiddle here

Upvotes: 0

Views: 153

Answers (5)

Uiupdates
Uiupdates

Reputation: 196

If you have to do similar slideToggle() in a code then use this keyword but for using this keyword instead of using ID's use class because ID's are unique in a page we cannot have two ID's of same name in a page.

div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>

Jquery

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next('.panel').slideToggle("slow");
    });
});

Upvotes: 2

Weafs.py
Weafs.py

Reputation: 22992

ids must be unique, use .classes instead.

To toggle the content, use $('.flip').index(this) to get the index of the clicked div and then use .panel:eq($('.flip').index(this)) to target the element that needs to be toggled.

$(document).ready(function() {
  $("div.flip").click(function() {
    $(".panel:eq(" + String(($('.flip').index(this)) + ")")).slideToggle("slow");
  });
});
.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
.panel {
  padding: 50px;
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flip">Click to slide Working</div>
<div class="panel">Hello world!</div>
<p>
  <div class="flip">not Working</div>
  <div class="panel">Hello world!</div>
</p>
<p>
  <div class="flip">not Working</div>
  <div class="panel">Hello world!</div>
</p>is there a general way to make all of them work without making changes each time.

Upvotes: 2

axel.michel
axel.michel

Reputation: 5764

Use classes instead of Id's and modify your script like this:

$(document).ready(function(){
    // all flip elements
    $(".flip").click(function(){
        // for each flip find next of type panel
        $(this).next('.panel').slideToggle("slow");
    });
});

Fiddle is here

Upvotes: 2

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

In this case you have to use the class instead of id. And then 

$(document).ready(function() {
    $('.panel').hide();
    $('.flip').click(function() {
        $(this).closest('.panel').slideToggle(500);
    });
});

And the html code would be like this

<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>**

Upvotes: 0

Liftoff
Liftoff

Reputation: 25372

Use classes instead of IDs

<div class="flip"></div>
<div class="panel></div>
<div class="flip"></div>
<div class="panel"></div>

jQuery

$(".flip").each(function(){
    //Do stuff
});

Upvotes: 0

Related Questions