Спойлер HTML (тег details)

Тег HTML5 details поддерживается только Chrome.

Посмотреть HTML
<details>
    <summary>посмотреть код</summary>  <!-- Первый тег <summary> создаёт область-кнопку, по которой можно щёлкать для сворачивания/разворачивания содержимого <details> -->
    <pre>появляющаяся информация</pre>
    <p>появляющийся объект
</details>
Посмотреть HTML
<details open>  <!-- Для того, чтобы элемент был видимым изначально, следует добавить атрибут open -->
    <summary>Посмотреть код</summary>
    <pre>исчезающая информация</pre>
    <p>исчезающий текст
</details>
Посмотреть CSS
<style>
.details summary { /* строки-заголовок для клика */
  position: relative;
  background: #4e6473;
  padding: 2px 10px;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
}
.details summary::-webkit-details-marker { /* треугольник */
   position: absolute;
   right: 10px;
   top: 30%;
}
.details[open] summary { /* цвет строки-заголовка в открытом виде */
  background: #c0c0c0;
}
</style>
в f t
наверх ↑

10 комментариев:

Анонимный
Спасибо все работает, то что надо
Pinka Cat
Супер! Именно то, что искала. Спасибо большое. Работает на ура
NMitra
Аккуратнее с ним, пока поддержка только у Хрома, это где-то 50-60% аудитории.
Игорь Подмогильный
Опера тож поддерживает
NMitra
Можно, конечно, плюнуть на поддержку. Ну и что, что вместо скрытого текста посетитель увидит развёрнутый вариант, доступность информации от этого не теряется.
Петю
Спасибо добрый человек- всё работает
NMitra
На здоровье, Петю
Анонимный
Круто!
Mitch
а как сделать чтобы спойлер был при открытии страницы свернутым?
у меня в хроме работает, но при открытии страници спойлер развернут, можно свернуть.
NMitra
См атрибут open
http://jsfiddle.net/NMitra/p1ju77s7
http://jsfiddle.net/NMitra/p1ju77s7/1/