Geek asks and answers

Convert hover accordion to onclick

I have an accordion menu that is designed with pure css3. It currently opens a menu when hovering over it, but I want it to be opened by click. Ho, did I achieve this?

Another help. Currently, the content of the div is on the right side of the header, but I need it to open on the left side.

And the content of the div should have an automatic width based on the content.

Here is the demo

+5
source share
2 answers
$('h3','.horizontalaccordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});​

Fiddle

+3
source

I think that you do not just need a click, but would also like to close the previously opened panels, and then check 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 this works for you!

0

More articles:


All Articles