Тег details
Тег "details". Что такое "details". Рассмотрим несколько примеров использования "details".
Подробно о теге "details".
- Что такое "details"?
- Как сделать "details" открытым?
- Заменить "подробнее" в "details" на свой текст?
- Заменить стандартный маркер у "details"
- Аккордеон на теге "details"
Что такое "details"?
Тег "details" - это показать/скрыть блок, только без скрипта javascript.
Лучше один раз увидеть, чем 100 раз услышать, поэтому... давайте выведем код тега "details"
Код тега "details"
<details>
Здесь текст, который невиден в "details"
</details>
Далее выведем тег "details" прямо здесь:
Пример тега "details"
Для того, чтобы увидеть текст, который скрыт нажмите по кнопке "подробнее"
Здесь текст, который невиден в "details"
Как видим "details" работает без каких либо дополнительных стилей или JavaScript, вся функциональность встроена в сам браузер.
Содержимое тега "details" по-умолчанию скрыто
Как сделать "details" открытым?
Выше пунктом мы узнали, что тег "details" по умолчанию закрыт:
<details>
Здесь текст, который невиден в "details"
</details>
Скрытый текст внутри тега "details"
Здесь текст, который невиден в "details"
Но если нам требуется, чтобы тег "details" был открытым?
Для этого требуется внутри тега добавить атрибут "open"
<details open>
Здесь текст, который виден в "details"
</details>
Пример "details" с атрибутом "open"
Здесь текст, который виден в "details"
Заменить "подробнее" в "details" на свой текст?
Как мы видим в теге "details" по умолчанию выводится слово "подробнее".
Здесь текст, который невиден в "details"
Можно ли "подробнее" заменить на свой текст?
Для этого, после открывающего тега "details" добавляем тег "summary"
Код "details" с заменой "подробнее"
<details>
<summary>Здесь свой текст</summary>
Здесь текст, который невиден в "details"
</details>
Пример замененным "подробнее" на свой текст в "details"
Здесь свой текст
Здесь текст, который невиден в "details"
Заменить стандартный маркер у "details"
Стандартный маркер у "details" - выглядит как треугольник, повернутый одной из вершин в правую сторону.
Здесь текст, который невиден в "details"
Если вы хотите "маркер" в "details", заменить на свой, то это можно сделать через css.
Для этого нам понадобится:
<details class="example">
<summary>Открыть details</summary>
Здесь текст, который невиден в "<strong>details</strong>"
</details>
<style>
/* Убираем стандартный маркер Chrome */
details.example summary::-webkit-details-marker {
display: none;
}
/* Маркер не уберется, если не изменить display */
details.example > summary:first-of-type {
display: block !important;
}
/* Начальный маркер выведем через content before="+" */
details.example summary:before {
content: "+";
color: #696f7c;
margin-right: 5px;
}
/* При открытом details выведем через content before="-" */
details[open] summary:before {
content: "-";
color: #696f7c;
margin-right: 5px;
}
</style>
Пример замены стандартного маркера на сво знак:
Это пример, который выведен вживую и для того, чтобы увидеть замененный маркер при открытии нажмите кнопку "Открыть details"
Открыть details
Здесь текст, который невиден в "details"
Аккордеон на теге "details"
Простой пример использования тега "details" для создания аккордеона:
<details class="accordion">
<summary>Открыть details</summary>
<div>Здесь текст, который невиден в details</div>
</details>
<details class="accordion">
<summary>Открыть details</summary>
<div>Здесь текст, который невиден в details</div>
</details>
<details class="accordion">
<summary>Открыть details</summary>
<div>Здесь текст, который невиден в details</div>
</details>
<style>
details.accordion summary::-webkit-details-marker {
display: none;
}
details.accordion > summary:first-of-type {
display: block !important;
}
details.accordion summary {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
}
.accordion {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
details.accordion div {
padding: 22px;
}
</style>