jQuery function not working for each selector -
i having difficulties getting code work every selector. have made 2 accordions opening css animation. issue second accordion doesn't work, , animation doesn't work separately both accordions. here source: jsfiddle
here jquery im using
$('#accordion').find('.accordion-toggle').click(function() { //expand or collapse panel $(this).next().slidetoggle('slow'); //hide other panels $(".accordion-content").not($(this).next()).slideup('fast'); if ($('img').hasclass('moved')) { $('img').removeclass('moved'); } else { $('img').addclass('moved'); } });
try following code ,replace id class use find() find elements relative accordion-toggle
$('.accordion').find('.accordion-toggle').click(function() { //expand or collapse panel $(this).next('.accordion-content').slidetoggle('slow'); //hide other panels $(".accordion-content").not($(this).next()).slideup('fast');//slide acordeons except 1 $('img').not($(this).find('img')).removeclass('moved');//remove moved classes exept current clicked 1 $(this).find('img').toggleclass('moved');// toggle current class }); demo:https://jsfiddle.net/03r1vmfv/2/
$('.accordion').find('.accordion-toggle').click(function() { //expand or collapse panel $(this).next().slidetoggle('slow'); //hide 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: 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 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 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 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>
Comments
Post a Comment