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.