Happy New Year Everyone!!
I have a hidden div that shows when a checkbox gets checked, like this:
<form action="[[~[[*id]]]]" method="POST">
<p><input type="checkbox" name="ck1" value="ck1" [[+ck1_checked]] id="chkProj" onclick="ShowHideDiv(this)" />
<label for="chkProj">Select Projection Dimensions from 0" to 2":</label></p>
<div id="checkb" style="display: none"><p>
<input type="checkbox" name="proj[]" value="0" [[+0_checked]] id="checkb0" onChange="this.form.submit();" />
<label for="checkb0">0"</label>
<input type="checkbox" name="proj[]" value="1" [[+1_checked]] id="checkb1" onChange="this.form.submit();" />
<label for="checkb1">1"</label>
<input type="checkbox" name="proj[]" value="2" [[+2_checked]] id="checkb2" onChange="this.form.submit();" />
<label for="checkb2">2"</label></p>
</div>
</form>
and some javascript to make it work:
<script type="text/javascript">
function ShowHideDiv(chkProj) {
var checkb = document.getElementById("checkb");
checkb.style.display = chkProj.checked ? "block" : "none";
}
</script>This works nicely (almost); a user un-hides the div by checking a checkbox and can select a dimension. The page reloads to show the selected products but the problem is the div is hidden again. I read somewhere to use sessionStorage for this, like so:
<script type="text/javascript">
function ShowHideDiv(chkProj) {
var checkb = document.getElementById('checkb');
checkb.style.display = chkProj.checked ? "block" : "none";
sessionStorage.setItem('show', 'true');
}
window.onload = function() {
var show = sessionStorage.getItem('show');
if(show === 'true'){
document.getElementById('checkb').style.display = "block";
}
}
</script>This works insofar the div stays shown after the page reloads. The issue now is that the div is also shown when the page first opens. When I check and uncheck the checkbox the div is hidden again.
All help is greatly appreciated!
