CODEWITHSUNDEEP
jqueryjquery-pluginsaccordionjquery-ui-accordionaccordionpane
Aqeel Javed
Aqeel Javed

Reputation: 21

Accordion Does Not Close on the mouse click

I have made the accordion and its working fine but when it is slide down and when we click on it to slide upwards it doesn't go upward towards the closing position. Below is my code kindly tell how to proceed?

(function($) {

    var allPanels = $('.accordion > dd').hide();

    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();
        $(this).parent().next().slideDown();
        return false;

    });

})(jQuery);

Upvotes: 2

Views: 584

Answers (2)

Anujith
Anujith

Reputation: 9370

Try this : http://jsfiddle.net/DDUQ5/1/

(function($) {

 var allPanels = $('.accordion > dd').hide();

 $('.accordion > dt > a').click(function() {
  $this = $(this);
  $target =  $this.parent().next();
  allPanels.removeClass('active').slideUp();
  if($target.is(':hidden')){
     allPanels.removeClass('active').slideUp();
     $target.addClass('active').slideDown();
  }

 return false;
 });

})(jQuery);​

Upvotes: 2

Jai
Jai

Reputation: 74738

I think this is the issue you are sliding up the hidden elements

var allPanels = $('.accordion > dd').hide();

instead try this one:

(function($) {
   var allPanels = $('.accordion > dd').hide();
   $('.accordion > dt > a').toggle(function() {
      allPanels.slideUp();
      $(this).parent().next().slideDown();
      return false;
   },function() {
      $(this).parent().next().slideUp();
      return false;
   });
})(jQuery);

Upvotes: 1

Related Questions