Как оставить открытым элемент срываемый с помощью чекбокса?

Question

[Mracula]

html

<div class="ac-container">
        <input id="filtervis" name="filtervis" type="checkbox">
        <label for="filtervis" class="filtervis"><div class="heading-f"><i class="fa fa-sliders-h"></i></div></label>
    <div id="article-id" class="article" style="display:none;"> Элемент который плавно открывается и закрывается</div>
</div>

Для того чтобы скрывать и плавно раскрывать элемент, а также что бы сохранялось выбранное состояние чекбокса через localStorage следующий код:

$(document).ready(function() {
$('#filtervis').click(function(){
	if ($(this).is(':checked')){
		$('#article-id').slideDown(1000);
	} else {
		$('#article-id').slideUp(1000);
	}
 });   
});
document.getElementById('filtervis').onclick = function() {
  if(document.getElementById('filtervis').checked) {
    localStorage.setItem('filtervis', "true");
  } else {
    localStorage.setItem('filtervis', "false");
  }
}
if (localStorage.getItem('filtervis') == "true") {
  document.getElementById("filtervis").setAttribute('checked','checked');
}

Все это работает, вот только как сделать чтобы после презагрузки элемент оставался видимым если чекбокс нажат и соответсвенно скрытым если наоборот, по условию он открывается и скрывается только при клике.

Вот попробовал на codepen

Answer 1

[Олег Колесников]

прежде чем делать это...

if (localStorage.getItem('filtervis') == "true") {
  document.getElementById("filtervis").setAttribute('checked','checked');
}

дождитесь загрузки DOM, вот так

document.addEventListener("DOMContentLoaded", checkChecked);
function checkChecked() {
  if (localStorage.getItem("filtervis") == "true") {
    document.getElementById("filtervis").setAttribute("checked", "checked");
   document.getElementById("article-id").setAttribute("style", "display"); // убираем display: none
  }
}

Comments

[Mracula]

Спасибо, все заработало!