Convert hover accordion to onclick

Question

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

Answer 1

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

​FIDDLE

Answer 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!