Как добавить второе событие для checkbox?

Question

Есть код:

let content = document.getElementById("content")
    let show = document.getElementById("showContent")
    let hide = document.getElementById("hideContent")
    
    show.addEventListener("click", () => {
        content.style.display = "block"
    })
    
    hide.addEventListener("click", () => {
        content.style.display = "none"
    });

На сайте чекбокс, если снимаю галку, то он скрывает блок

<input type="checkbox" id="hideContent">
<label for="s1">скрыть</label>

Как сделать, чтобы при обратном нажатии на чекбокс блок опять становился видимым?

Answer 1

Проверяй свойство checked в чекбоксе

Answer 2

Можно повесить слушатель на чекбокс;
"Тогглить" контент при изменении состояния чек бокса

const checkbox = document.getElementById("hideContent");
const content = document.querySelector(".content");

checkbox.addEventListener('change', ()=>{
 content.classList.toggle('hide')
})

.hide{
  display: none;
}

<input type="checkbox" id="hideContent">
<label for="s1">скрыть</label>
<p class = 'content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo in, provident ad nihil voluptate quo? Adipisci debitis animi at officia sint, illo, maxime voluptates, voluptatibus aliquam in ipsa, similique fugiat.</p>

Или, вот так:

const checkbox = document.getElementById("hideContent");
const content = document.querySelector(".content");
const content2 = document.querySelector(".content2");


checkbox.addEventListener('change', (e)=>{
 if(e.target.checked){
 content.classList.add('hide')
 }
 else
 content.classList.remove('hide')
})

.hide{
  display: none;
}

<input type="checkbox" id="hideContent">
<label for="s1">скрыть</label>
<p class = 'content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo in, provident ad nihil voluptate quo? Adipisci debitis animi at officia sint, illo, maxime voluptates, voluptatibus aliquam in ipsa, similique fugiat.</p>
<p class = 'content2'>Lorem zfdsdfgsdfgsdfg ipsum dolor sit amet, consectetur adipisicing elit. Explicabo in, provident ad nihil voluptate quo? Adipisci debitis animi at officia sint, illo, maxime voluptates, voluptatibus aliquam in ipsa, similique fugiat.</p>

Answer 3

А вообще такую задачу можно легко решить без js:

#show-hide {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid red;
  display: none;
}
#toggle-content:checked ~ #show-hide {
  display: block;
}

<input type="checkbox" id="toggle-content" checked>
<div id="show-hide">Блок с контентом</div>

БЛОГ НА HUSL

Как добавить второе событие для checkbox?

Ответы (3 шт):