jQuery function not working for each selector

Question

I am having difficulties for getting my code to work for every selector. I have made 2 accordions with opening CSS animation. The issue is that the second accordion doesn't work, and the animation doesn't work separately for both accordions. Here is my source: JSFIDDLE

Here is the jQuery im using

    $('#accordion').find('.accordion-toggle').click(function() {

  //Expand or collapse this panel
  $(this).next().slideToggle('slow');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

  if ($('img').hasClass('moved')) {
    $('img').removeClass('moved');
  } else {
    $('img').addClass('moved');
  }
});

Answer 1

The answer comes down to ids are singular. You can not have more than one element with an id. So when you select $('#accordion') it is returning the first element with that id.

Change it to be an class. Now you also need to change the code so it is looking for the image inside of the accordion instead of all images.

So change id="accordion" to class="accordion"

and do something like this

 $('.accordion').find('.accordion-toggle').click(function() { var panel = $(this).next(); //Expand or collapse this panel panel.slideToggle('slow'); //Hide the other panels $(".accordion-content").not(panel).slideUp('fast').parent().find("img").removeClass("moved"); var img = $(this).find('img').toggleClass("moved"); }); 

 .accordion-toggle:hover{ cursor:pointer; } img { width: 30px; position: absolute; transition: all 1s; } .openclose { text-align: center; position: relative; margin: 30px; } .moved { left: calc(50% - 15px) !important; top: 50% !important; transform: rotate(630deg) !important; } .container{ background: grey; border-radius: 20px; padding: 30px 0; width: calc(100% - 30px); margin: auto; } .accordion-content{ padding:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="accordion"> <div class="accordion-toggle"> <div class="openclose"> <p class="resp-p man">I am working fine :)</p> <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> </div> </div> <div style="display: none;" class="accordion-content default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> <br> <div style="text-align:center">Lots of ocntent between</div> <br> <div class="container"> <div class="accordion"> <div class="accordion-toggle"> <div class="openclose"> <p class="resp-p man">I dont work :(</p> <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> </div> </div> <div style="display: none;" class="accordion-content default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> 

Answer 2

You are using same ids for two elements. due to which id selector only selects first match element and not all element with same id. You can rather use class selector from container div.

you will also need to target image elements in currently clicked element container to make this work. You can use make your code much cleaner by using toggleClass)_ instead of checking class existence and toggling classes:

$('.container').find('.accordion-toggle').click(function() {
 var _this = $(this);
 //Expand or collapse this panel
  _this.next().slideToggle('slow');
 //Hide the other panels
  $(".accordion-content").not(_this.next()).slideUp('fast');
  _this.find('img').toggleClass('moved');
});

Working Demo

Answer 3

Try the following code ,replace the id with a class use find() to find the elements relative to the accordion-toggle

   $('.accordion').find('.accordion-toggle').click(function() {

  //Expand or collapse this panel
  $(this).next('.accordion-content').slideToggle('slow');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');//slide up all acordeons except this one
   $('img').not($(this).find('img')).removeClass('moved');//remove all moved classes exept for the current clicked one

    $(this).find('img').toggleClass('moved');// toggle the current class

});

demo: https://jsfiddle.net/03r1vmfv/2/

 $('.accordion').find('.accordion-toggle').click(function() { //Expand or collapse this panel $(this).next().slideToggle('slow'); //Hide the other panels $(".accordion-content").not($(this).next()).slideUp('fast'); $('img').not($(this).find('img')).removeClass('moved'); $(this).find('img').toggleClass('moved'); }); 

 .accordion-toggle:hover { cursor: pointer; } img { width: 30px; position: absolute; transition: all 1s; } .openclose { text-align: center; position: relative; margin: 30px; } .moved { left: calc(50% - 15px) !important; top: 50% !important; transform: rotate(630deg) !important; } .container { background: grey; border-radius: 20px; padding: 30px 0; width: calc(100% - 30px); margin: auto; } .accordion-content { padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="accordion"> <div class="accordion-toggle"> <div class="openclose"> <p class="resp-p man">I am working fine :)</p> <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> </div> </div> <div style="display: none;" class="accordion-content default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> <br> <div style="text-align:center">Lots of ocntent between</div> <br> <div class="container"> <div class="accordion"> <div class="accordion-toggle"> <div class="openclose"> <p class="resp-p man">I dont work :(</p> <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png"> </div> </div> <div style="display: none;" class="accordion-content default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div>