JSFiddle - React, Tailwind, and code Playground
HTML
<h4><span class="glyphicon glyphicon-minus colit" aria-hidden="true"></span>DISCOUNTS</h4>
<div class="row row1 scroll-pane">
<div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Upto - 10% (20)</label>
</div>
<div class="col col-4">
<label class="checkbox" data-action="check1" ><input type="checkbox" name="checkbox" id="check1" ><i></i>70% - 60% (5)</label>
<label class="checkbox" data-action="check1"><input type="checkbox" name="checkbox" id="check2"><i></i>50% - 40% (7)</label>
<label class="checkbox" data-action="check1"><input type="checkbox" name="checkbox" id="check3" ><i></i>30% - 20% (2)</label>
<label class="checkbox" data-action="check1"><input type="checkbox" name="checkbox" id="check4" ><i></i>10% - 5% (5)</label>
</div>
</div>
<h4><span class="glyphicon glyphicon-minus colit" aria-hidden="true"></span>Type</h4>
<div class="row row1 scroll-pane">
<div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Alla (30)</label>
</div>
<div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Amante (30)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Roxy (30)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>River Land (30)</label>
<label class="checkbox"><input...
JavaScript
$(document).ready(function(){
$('#check1').click(function(){
// This is the triggered action name
switch ($(this).attr("data-action")) {
// A case for each action. Should personalize to your actions
case "check1":
alert("Info");
break;
case "check2":
alert("Contact");
break;
case "check3":
alert("Help");
break;
}
});
alert('Toggle');
});
});