Convert hover accordion to onclick

问题

I have a accordion menu which is developed with pure css3. Currently it is opening the menu when hover on it but I want it to be opened on click. Ho do I achieve this?

One more help. Currently content div is in the right side of the heading but I need that to be opened in the left side.

And content div should have auto width based on the content.

Here is the DEMO

回答1:

$('h3','.horizontalaccordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});

FIDDLE

回答2:

I think that you not just need a click but also would like to close the previously opened panels, then please check out this code:

$('h3','.horizontalaccordion ul li').click(function() {
  $('*[class*=hover]').removeClass('hover'); // close all opened tabs
  $(this).closest('li').addClass('hover'); // open the currently clicked one
});

jsFiddle Example

I hope that works for you!

来源：https://stackoverflow.com/questions/12086690/convert-hover-accordion-to-onclick

标签

jquery