Как изменить стандартный заголовок <details>
При использовании элемента <details>, который создаёт разворащивающийся / сворачивающийся по клику блок с некоторым контентом, браузеры по умолчанию добавляют в качестве заголовка такого спойлера, чтобы как-то обозначить его, свой текст; что-то типа Подробнее. Однако текст можно задать и свой, с помощью вспомогательного элемента <summary>:
<details>
<summary>Заголовок</summary>
Некоторый контент
</details>Поддержку <details> браузерами смотрите на CanIUse.Com: здесь.
Пример
Элементы <details> можно вкладывать друг в друга, создавая тем самым спойлер в спойлере.
Дополнительное оформление
Скрыть стрелку, которую по умолчанию браузер добавляет перед текстом заголовка, можно обернув текст <summary> в <span> с соответствующим фоном и сдвинув его влево:
<style>
summary > span {
background-color: #fff;
margin-left: -1.1em;
}
</style>
<details>
<summary><span>Скрытый текст</span></summary>
Контент под заголовком «Скрытый текст»
</details>Чтобы изменить вид курсора при наведении на заголовок (по умолчанию он установлен как text) и убрать рамку, добавляемую браузером при клике по нему, можно сделать так:
summary {
cursor: pointer;
outline: 0;
}