Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Trying to use a styled checkbox in an accordion header

Trying to use a styled checkbox in an accordion header


EDIT I was trying to select the Checkbox with $("#accordion input[type='checkbox']") which didn't work, because I had the checkbox set to display:none; I ended up having to use $("#accordion .onoffswitch") instead, because that effected the div which contained the fancy toggle part of the fancy toggle switch.

I'm trying to create an Accordion of clients where - in the header - you can have a toggle switch. This way I can set whether a client is active or not in my app without the user having to open the accordion, but still have the ability to open the accordion and interact with elements inside.

My problem is that the toggle switch doesn't seem to be clickable.

It's hard to describe, so here's a JSFiddle of my problem

basically, I just need to get my toggle switch to be able to change.

I already implement some propagation javascript like so:

$( ".accordion" ).accordion();
$('.accordion input[type="checkbox"]').click(function(e) {

So my concern is that the H3 tags are somehow blocking the checkbox click event from firing.

Let me know if you would like me to post anything else related to the code (though the JSFiddle pretty much has it all there.)

Problem courtesy of: SamHuckaby


Try using:

$('#accordion .onoffswitch').click(function(e) {

As this only gets activated when you select the checkbox, which you have hidden. Select the whole "switch" not the hidden checkbox.

Solution courtesy of: koerbcm


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Trying to use a styled checkbox in an accordion header


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription