На чём делают спойлер?

Question

[Монти Пайтон]

На CSS или JS? Или ещё как нибудь?

Answer 1

[Александр]

Самый простой вариант - CSS.

Answer 2

[Exploding]

А как же details - summary? Без css и js...

Comments

[Монти Пайтон]

Если честно, делал скрытый намёк на эти 2 тэга...
И надеялся на то, что вы зададите этот вопрос. Просто настораживала их новизна, и смущало то как их использовать, при помощи стиля или при помощи булевского атрибута "open".

1)наверное атрибут лучше не использовать?
2)как удалить рамку вокруг?

[Exploding]

Ostin1: как это не использовать? А как же тогда блок будет "разворачиваться"? И в чем проблема стилизовать его так:
details[open]{
...
}

[Exploding]

Ostin1: рамку вообще *{outline:none;}

[Exploding]

Булевский атрибут? Я что-то не слышал о таких... Хотя я много о чем не слышал)) Как по мне атрибут как атрибут...

[Монти Пайтон]

Exploding: https://developer.mozilla.org/uk/docs/Web/HTML/Ele...

[Монти Пайтон]

Exploding: пока читал ответ, пришла на ум более другая идея, как сделать так чтобы кастомная рамка была вокруг всего разворачиваемого блока? Пользователям незнакомыми с тем что такое "спойлер" наверное будет больше понятно к чему относится открытая информация, чисто интуетивно, имхо так будет нагляднее смотреться контент в ней, правильно?

[Exploding]

Ostin1: Хм, получается, что к этому типу атрибута относятся и checked и selected? Хотя в ранней спецификации, не помню версию, они не булевскими были... Ну вот теперь буду знать что это называется именно так!:)

[Монти Пайтон]

Exploding: та да... всё развивается о-о-о-чень быстро, и если это перестать обсуждать, то никогда не узнаешь много нового...

[Exploding]

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

[Монти Пайтон]

Exploding: а насчёт более доработанной рамки вы можете чтото подсказать?

как сделать так чтобы кастомная рамка была вокруг всего разворачиваемого блока? Пользователям незнакомыми с тем что такое "спойлер" наверное будет больше понятно к чему относится открытая информация, чисто интуетивно, имхо так будет нагляднее смотреться контент в ней, правильно?

или может есть ещё более наглядная реализация?

[Exploding]

Ostin1: ну как... Как обычно рамку делаем: details {border: 1px solid #000;}
Или
details {box-shadow: 0 0 0 1px #000;}

[Exploding]

Ostin1: спойлер состоит из двух блочных элементов. Суммари вложен в детаилс. Для чего рамка нужна, для того и делаем.... Или я не правильно понял вопрос?

[Exploding]

Ostin1: я просто с телефона не успеваю так быстро код натыкивать:)

[Монти Пайтон]

Exploding: класс, то что нужно

[Монти Пайтон]

Exploding: Стараясь не перемешивать контент с реализацией?

как это не использовать? А как же тогда блок будет "разворачиваться"?

<details>
      <summary>Some details</summary>
      <p>More info about the details.</p>
</details>

... а оно без атрибута и стиля открывается и закрывается

[Exploding]

Ostin1: без стиля понятно что он откроется и закроется)) стили я вам как пример стилизации открытого блока привел.
А вот без атрибута... Как бы вам так объяснить... Атрибут open добавляется браузером и указывает на признак открытого блока. Т.е. если изначально вы не укажите атрибут ореn то спойлер в исходном состоянии будет закрыт. Клик по суммари разворачивает блок и добавляет атрибут ореn. Управление откр/закр. с помощью js соответственно производится добавляя/ удаляя этот атрибут

[Монти Пайтон]

Exploding:

стили я вам как пример стилизации открытого блока привел

да, спасибо огромное за стили тоже, мне кстати так и хотелось чтобы 1 блок был развёрнутый по умолчанию а остальные закрыты изначально