单击关闭JQuery水平手风琴

Question

Example: http://vincent-massaro.com/map/

Currently, the script allows you to click on a piece of the accordion to open it, but it is set to close on mouseleave. When I set the mouseleave to .click, it gets confused and doesn't know what state it is in. I want to make it so that you can click to open it, and click to close it, instead of mouseleave. The code controlling this is below, and the full script is in haccordion.js linked in the page source. If someone could help me modify this script, I would be very grateful! Thanks in advance.

$target.click(function(){
            haccordion.expandli(config.accordionid, this)
                    config.$lastexpanded=$(this)
  })
            if (config.collapsecurrent){ //if previous content should be contracted when expanding current
                    $target.mouseleave(function(){
                          $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed)
  })
  }

Answer 1

You could set a boolean variable to represent whether the accordion is open or not and just check it on click. (You'll need to toggle the variable's state on click too)

Edit:

Ok try this. Set a boolean global variable (outside the click event) like this:

var accordion_expanded = false;

Then within your click event do something like this: (I haven't tested this so you might have to massage it a bit to fit your circumstance)

In the function where you expand your accordion put this:

accordion_expanded = true;

And in the function where you contract your accordion do a

if(accordion_expanded == true){
   //Contract accordion code goes here

   accordion_expanded == false;
}

Good Luck!

Answer 2

try use this

$('.accordion-item-header').click(function() {
    var item = $(this).parent().find('.accordion-item-body');
    item.toggleClass('open').animate({
        width:item.hasClass('open') ? 0: 100 
    }, 100).toggleClass('open');
});