0

Есть код:

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>

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

3 ответа 3

4

А вообще такую задачу можно легко решить без 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>

2
  1. Можно повесить слушатель на чекбокс;
  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>

1
  • Спасибо!!! Только не могу разобраться, можно ли заставить работать на мобильных утройствах? На ПК всё работает, на телефоне нет. 22 июн 2022 в 14:07
-2

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

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 22 июн 2022 в 7:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.