javascript - FAQ Toggle Arrow Animation -
hello have below code faq toggle issue when click on question slides , show answer arrows in question triggers.
<div class="faqbox" id="faq-list"> <div class="qblock"> <span class="arrow"></span> <h2>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2> <div class="answer"> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p> </div><!-- answer --> </div><!-- qblock --> <div class="qblock"> <span class="arrow"></span> <h2>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2> <div class="answer"> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p> </div><!-- answer --> </div><!-- qblock --> </div><!-- faqbox --> this js
function togglefaqarrow(){ $('.qblock .arrow').toggleclass('rotate'); } $(document).ready(function() { $('.qblock h2').click(function(){ $(this).next('.answer').slidetoggle(500); $(this).toggleclass('close'); togglefaqarrow(); }); });
your togglefaqarrow() function targets all arrow class elements inside all qblock class elements. want toggle rotate class of sibling class arrow of h2 element clicked.
to achieve this, change js to:
$(document).ready(function() { $('.qblock h2').click(function(){ $(this).next('.answer').slidetoggle(500); $(this).toggleclass('close'); $(this).siblings('.arrow').toggleclass('rotate'); }); }); 
Comments
Post a Comment