JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ServiceDesc Alternate">
<span class="expandable">
<input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
</span>
</div>
JavaScript
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function () {
ToggleCheckboxes($(this),true);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
return false;
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}