Question

I have a simple FAQ page in which each item has the following HTML syntax

   <article>
       <h3><a href="#"><i class="icon-down"></i> Item Title</a></h3>
       <p class="entry">Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </article>

My Jquery is:

   $('#faq h3').click(function(e){
       e.preventDefault();
       if ( !$(this).hasClass('hidden') ) {
           $(this).addClass('shown');
           $(this).next('.entry').slideDown();
       } else {
           $(this).removeClass('shown');
           $(this).next('.entry').show();
       }
   });

When I click my item heading, the text below disappears instantly. When I click back on the heading, the item will not show up as expected. My console shows no error.

What am I doing wrong?

Answer 1

You are getting the same action each time because it never has the class “hidden”. The easiest way of doing this is:

$('#faq h3').on('click',function(e){
   e.preventDefault();
   $(this).next('.entry').slideToggle();
});

Hope it works for you