CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Si8
Si8

Reputation: 9235

How to toggle using JQuery

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/

Upvotes: 0

Views: 98

Answers (5)

Milind Anantwar
Milind Anantwar

Reputation: 82251

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

Upvotes: 2

m4n0
m4n0

Reputation: 32345

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

Upvotes: 1

Buzinas
Buzinas

Reputation: 11735

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

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

Updated Fiddle

Upvotes: 2

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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');
        }

Upvotes: 1

duncanhall
duncanhall

Reputation: 11431

    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/

Upvotes: 1

Related Questions