I am trying to restore a display property (none or block) from a div, after my site refreshes. I have multiple div's with that class, but the have a unique ID. Inside those div's are some checkboxes that refreshes the site after they get checked/unchecked.
Here is a jsfiddle: https://jsfiddle.net/074jatfs/2/
This is my sidebar with my div's and checkboxes:
<div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
<div class="filter-panel--flyout" style="border:none;"><div id="label-it" class="label-it"><label class="filter-panel--title"><h3>Filter Group 1</h3></label></div>
<div class="filter-panel--content" id="FilterGroup1">
<ul class="filter-panel--option-list" style="list-style-type:none;">
<li class="filter-panel--option">
<div class="option--container" style="display:block;">
<span class="filter-panel--checkbox"><input type="checkbox" value="603"><span class="checkbox--state"> </span>
</span>
<label>Filter 1</label>
</div>
</li>
<li class="filter-panel--option">
<div class="option--container" style="display:block;">
<span class="filter-panel--checkbox"><input type="checkbox" value="613"><span class="checkbox--state"> </span>
</span>
<label>Filter 2</label>
</div>
</li>
</ul>
</div>
</div>
<div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
<div class="filter-panel--flyout" style="border:none;"><div id="label-it" class="label-it"><label class="filter-panel--title"><h3>Filter Group 2</h3></label></div>
<div class="filter-panel--content" id="FilterGroup2">
<ul class="filter-panel--option-list" style="list-style-type:none;">
<li class="filter-panel--option">
<div class="option--container" style="display:block;">
<span class="filter-panel--checkbox"><input type="checkbox" value="603"><span class="checkbox--state"> </span>
</span>
<label>Filter 3</label>
</div>
</li>
<li class="filter-panel--option">
<div class="option--container" style="display:block;">
<span class="filter-panel--checkbox"><input type="checkbox" value="613"><span class="checkbox--state"> </span>
</span>
<label>Filter 4</label>
</div>
</li>
</ul>
</div>
</div>
<div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
<div class="filter-panel--flyout" style="border:none;"><div id="label-it" class="label-it"><label class="filter-panel--title"><h3>Filter Group 3</h3></label></div>
<div class="filter-panel--content" id="FilterGroup3">
<ul class="filter-panel--option-list" style="list-style-type:none;">
<li class="filter-panel--option">
<div class="option--container" style="display:block;">
<span class="filter-panel--checkbox"><input type="checkbox" value="603"><span class="checkbox--state"> </span>
</span>
<label>Filter 5</label>
</div>
</li>
<li class="filter-panel--option">
<div class="option--container" style="display:block;">
<span class="filter-panel--checkbox"><input type="checkbox" value="613"><span class="checkbox--state"> </span>
</span>
<label>Filter 6</label>
</div>
</li>
</ul>
</div>
</div>
When the div label-it is clicked the div filter-panel--content toggles from display:block to display:none and the other way (display:none to display:block)
At this point I want to save the current property of display and restore it when the site refreshes.
This is my first try to sessionStorage the property, I tried to set it in the toggle function:
$('.label-it').click(function() {
$(this).closest(".filter-panel--flyout").find(".filter-panel--content div").toggle(350)
sessionStorage.setItem("filterstate", $("#FilterGroup1").css("display"));
});
To restore the filterstate I tried this:
$(document).ready(function () {
sessionStorage.getItem("filterstate");
if (sessionStorage.getItem("filterstate"))
{
$("#FilterGroup1").css("display", sessionStorage.getItem("filterstate"));
}
});
I cant restore the css property, can someone help me? Please.
You need to instead try storing the display value for the div which is actually toggled
and not its parent.
sessionStorage.setItem("filterstate", $("#FilterGroup1 .option--container").css("display"));