CODEWITHSUNDEEP
javascriptjquerycss
Shniper
Shniper

Reputation: 854

How to use multiple css toggle switches in one page with js or jquery

Fiddle

I'm trying to make a toggle switch that will drain the color from an image when toggled. I was directed to a tutorial that helped me make the switch but it is all css and therefore without making a new class name for every single switch used I can't re-use it(that I know of) What is the best js or jquery to allow me to use this toggle multiple times.

The issue is that when I click on any of the switches it always animates the first one only. 

<div class="switch">
        <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
        <label for="cmn-toggle-7" data-on="Color" data-off="B&W"></label>
</div>

Upvotes: 3

Views: 2549

Answers (1)

Jeff
Jeff

Reputation: 31

Because you have the same ID for each checkbox and the same for attribute for each label, the toggle switches are all pointing to the first checkbox.

You need to have a different id and corresponding for for each toggle switch.

Here is an Updated fiddle: https://jsfiddle.net/757vnetp/1/

Upvotes: 2

Related Questions