How to toggle using JQuery

Question

I have an accordion, and I'm able able to open on each click, but how can I close it back again?

HTML:

<ul class="accordion">
<li id="one" class="files">
        <a href="#one">Calendar 1<span>10</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>1</span></a></li>
        </ul>
    </li>
<li id="two" class="mail">
        <a href="#two">Calendar 2<span>20</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>2</span></a></li>
        </ul>
    </li>
<li id="three" class="cloud">
        <a href="#three">Calendar 3<span>30</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>3</span></a></li>
        </ul>
    </li>
<li id="four" class="sign">
        <a href="#four">Calendar 4</a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu</a></li>
        </ul>
    </li>
</ul>

Javascript:

$(document).ready(function() {
  // Store variables
  var accordion_head = $('.accordion > li > a'),
      accordion_body = $('.accordion li > .sub-menu');

  // Open the first tab on load
  accordion_head.first().addClass('active').next().slideDown('normal');

  // Click function
  accordion_head.on('click', function(event) {
    // Disable header links
    event.preventDefault();

    // Show and hide the tabs on click
    if ($(this).attr('class') != 'active') {
      $(this).next().stop(true,true).slideToggle('normal');
      $(this).addClass('active');
    }
  });
});

Fiddle: http://jsfiddle.net/fuuLh494/

Answer 1

You dont need to explicitly check for active class occurence and then do add/remove decision of class. You can achieve this with toggleClass :

accordion_head.on('click', function(event) {
 event.preventDefault();
  $('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
  $(this).next().stop(true,true).slideToggle('normal');
  $(this).toggleClass('active');
});

Working Demo

Answer 2

    if ($(this).attr('class') != 'active'){
        //accordion_body.slideUp('normal');
        $(this).next().stop(true,true).slideToggle('normal');
       //accordion_head.removeClass('active');
        $(this).addClass('active');
    } else {
        $(this).next().stop(true,true).slideToggle('normal');
        $(this).removeClass('active');
    }

See the updated fiddle here: http://jsfiddle.net/9ev31v6w/

Answer 3

The best you can do with a tutorial is learn, and not copy&paste without read the code. It's as simple as this:

http://jsfiddle.net/fuuLh494/1/

I add else statement at the end of the script:

      else {
            $(this).next().stop(true,true).slideToggle('normal');
            $(this).removeClass('active');
        }

Answer 4

Replace all instances of addClass with toggleClass and remove the condition of if class is active.

We are trying to remove the class when the class is already added using toggleClass() and don't need any if condition block.

accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed

Working JSfiddle

Answer 5

You can remove the if completely, and use both slideToggle and toggleClass :

$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');

Updated Fiddle