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

Question

[pahanmcs]

Спойлер
В данном спойлере после его раскрытия и при нажатии на сам текст (.hidebigtext) он закрывается, а надо чтобы только этой же кнопкой закрывался "Развернуть" при повторном нажатии.
Кто знает, как на css сделать, край + script?

Comments

[Johny Smith]

there is no jscode needed, почему вы поставили тэг JavaScript если в вашем примере JS-код отсутствие?

[pahanmcs]

Olek1, удалил тэг

[Johny Smith]

pahanmcs, в интернете есть целая куча примеров, например если напечатать прямо в google запрос ccs spoiler по типу https://codepen.io/oloman/pen/odnqy вы пробовали в них заглядывать, ничего похожего по своему вопросу не нашли?

или вот старая статья на хабре 2013 года https://habr.com/ru/post/167151/ вам не подойдут такие варианты решения вашей задачи?

[pahanmcs]

Olek1, вполне
хотел без input сделать

Answer 1

[profesor08]

На CSS

<div class="spoiler">
  <input id="checkbox-1" type="checkbox" >
  <label for="checkbox-1">toggle</label>
  <div class="content">Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!</div>
</div>

.spoiler input:checked ~ .content {
  height: auto;
}

.spoiler  .content {
  height: 20px;
  overflow: hidden;
}

Проблема очевидна, надо для всех спойлеров генерировать уникальный id на странице. По этому лучше делать это на js.

Comments

[Rustam Bainazarov]

Ещё можно задействовать details, если поддержка со стороны браузеров устраивает:
https://www.w3schools.com/tags/tryit.asp?filename=...

[profesor08]

Рустам Байназаров, только браузеры webkit, и выглядит так себе, и работает так себе, и кастомизация только базовая.

[Rustam Bainazarov]

profesor08, Firefox тоже поддерживает, поэтому на круг Firefox, Chrome и Safari.

Но это я привёл больше к тому, чтобы сравнительно привести человека к JS-варианту по типу вашего. Он выше писал, что хочет без JS и хака на input'ах.

[pahanmcs]

Рустам Байназаров, согласен, придется на js
на css много проблем с уникальностью id

[Rustam Bainazarov]

pahanmcs, можно обойтись без ID вообще, если структура вся внутри label:



Но тогда нельзя сделать нормально клики внутри (по ссылкам, например) + вся область становится переключателем спойлера, а не только кнопка или заголовок. Так что — JS ваш друг навек.

[Johny Smith]

Рустам Байназаров,

можно обойтись без ID вообще, если структура вся внутри label

классный код, это какойто известный паттерн, или сами написали?

[Rustam Bainazarov]

Olek1, сам написал, не знаю, насколько он известен. Но он не универсальный, к сожалению, с учётом тех недостатков, что я описал выше.

[Johny Smith]

Рустам Байназаров, как хранить такие куски кода, мне он когда нибудь пригодиться может, в Gist?

[Rustam Bainazarov]

Olek1, можно там, можно в личном аккаунте на CodePen или JSFiddlle — как хотите :))

[pahanmcs]

Рустам Байназаров, предложенный код на js profesor08 не работает
пришлось редактором переделать scss в css
но все равно
Uncaught SyntaxError: Identifier 'spoilers' has already been declared
смена идентификатора не помогает

[Rustam Bainazarov]

Olek1, если что, анимировать это дело можно тоже хаками:


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

[Rustam Bainazarov]

pahanmcs, даже не знаю, лучше дождаться автора ответа в данном случае, он подскажет, что да как.

[profesor08]

pahanmcs,

предложенный код на js profesor08 не работает

Мой код работает. Мой рабочий пример этому доказательство. https://jsfiddle.net/profesor08/jutcxfab/

Uncaught SyntaxError: Identifier 'spoilers' has already been declared

В твоем коде где-то уже объявлена переменная spoilers