Закрывается спойлер после нажатия внутри него

Question

Как сделать так, чтобы спойлер открывался или закрывался только по нажатию на кнопку Spoiler? Сейчас спойлер можно закрыть, если кликнуть на пустое пространство или на текст в спойлере. Как исправить это?

https://jsfiddle.net/xrgacL6w

<div class="spoiler">
    <label>
      <input type="checkbox" />
      <span class="btn">Spoiler</span>
      <div class="text">
        text<br>  
      </div>
    </label>
</div>

Answer 1

Предлагаю использовать html тег <details>, так мы уменьшим код и pointer-events не нужен.

<details>
    <summary>Spoiler</summary>
    <span class="text">Скрытый текст!</span>
</details>

summary {
    list-style-type: none;
    display: inline-block;
    border: none;
    border-radius: 4px;
    font-size: 22px;
    padding: 10px 20px;
    background: #558ed6;
    color: #fff;
    font-family: Tahoma, sans-serif;
    cursor: pointer;
  
}

.text {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 12px 0 20px;
    display: block;
}

Answer 2

В вашем примере можно ограничить область действия клика при помощи свойства pointer-events:

.spoiler {
    pointer-events:none;
}
.btn {
    pointer-events:auto;
}

.spoiler {
  display: block;
  pointer-events: none;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 4px;
  font-size: 22px;
  padding: 10px 20px;
  background: #558ed6;
  color: #fff;
  font-family: Tahoma, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}

.spoiler input[type=checkbox] {
  display: none;
}

.text {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 12px 0 20px;
}

.spoiler input[type=checkbox]~.text {
  display: none;
}

.spoiler input[type=checkbox]:checked~.text {
  display: block;
}

.spoiler input[type=checkbox]:after~.text {
  display: block;
}

<div class="spoiler">
  <label>
      <input type="checkbox" />
      <span class="btn">Spoiler</span>
      <div class="text">
        text<br>  
      </div>
    </label>
</div>

Answer 3

document.querySelector(".btn").onclick = function(){
    if (document.querySelector(".text").style.display == "none"){
        document.querySelector(".text").style.display = "block";
    }
    else{
        document.querySelector(".text").style.display = "none";
    }
};

https://jsfiddle.net/b3svL6cj/15/

Краткий вариант с использованием JS, в этом варианте не надо ничего крутить в стилях не надо.

Обязательно зайдите на jsfiddle, там изменён и css и html.

БЛОГ НА HUSL

Закрывается спойлер после нажатия внутри него

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