jQuery Multiple Toggle

Question

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

your markup is invalid...you cannot use duplicate id's.. its wrong — Kartikeya Khosla
– Kartikeya Khosla, Commented Dec 6, 2014 at 9:02
whats the best way to do it without changing class or id each time — Ghostff
– Ghostff, Commented Dec 6, 2014 at 9:03
in html markup id's should be unique...instead of giving same id's to elements give them same class name..and then use class name in jquery selector. — Kartikeya Khosla
– Kartikeya Khosla, Commented Dec 6, 2014 at 9:04
Actually that Worked but it Toggled everything each time i click on any of them — Ghostff
– Ghostff, Commented Dec 6, 2014 at 9:06

axel.michel · Accepted Answer · 2014-12-06 09:08:16Z

2

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

answered Dec 6, 2014 at 9:08

axel.michel

5,8741 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ghostff Over a year ago

what if i want to toggle a div at the top. it seems that the answers only work for the div next to it. eg( jsfiddle.net/txbh1xp0/5)

axel.michel Over a year ago

Well yes, since it is using next method, it works only for next element. Looking before would be .prev(). Your updated fiddle contains other element(s) in between. In this case you might either use a bit more complex solution like a data-attribute, which contains the related element identifier, or you go for prevAll('.panel') - see updated fiddle: jsfiddle.net/txbh1xp0/7

Ghostff Over a year ago

i Added some codes to the HTML and it stopped working. update here jsfiddle.net/txbh1xp0/8

axel.michel Over a year ago

@ChrysUgwu Did you ever work with a library like jQuery? It seems that you don't have any idea of what you are doing there. Prev and Next find siblings - if you nest items in other elements - they are no longer siblings. The method also offers the option to use a data-atttribute to set any kind of related element - which you did not use. I've modified your fiddle one more time: jsfiddle.net/txbh1xp0/9 (moved the class name to parent element) - my advice, start reading and learning, or hire someone who can handle such a task.

Weafs.py · Accepted Answer · 2014-12-06 09:16:32Z

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.

Uiupdates · Accepted Answer · 2014-12-06 09:16:44Z

2

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

answered Dec 6, 2014 at 9:16

Uiupdates

1961 silver badge13 bronze badges

Comments

Liftoff · Accepted Answer · 2014-12-06 09:07:42Z

0

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

answered Dec 6, 2014 at 9:07

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

Comments

Ahmad Sharif · Accepted Answer · 2014-12-06 09:07:54Z

0

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>**

answered Dec 6, 2014 at 9:07

Ahmad Sharif

4,4536 gold badges40 silver badges51 bronze badges

Collectives™ on Stack Overflow

jQuery Multiple Toggle

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related