Тег details

Тег "details". Что такое "details". Рассмотрим несколько примеров использования "details".

Подробно о теге "details".

1. Что такое "details"?
2. Как сделать "details" открытым?
3. Заменить "подробнее" в "details" на свой текст?
4. Заменить стандартный маркер у "details"
5. Аккордеон на теге "details"

Что такое "details"?

Тег "details" - это показать/скрыть блок, только без скрипта javascript.

Лучше один раз увидеть, чем 100 раз услышать, поэтому... давайте выведем код тега "details"

Код тега "details"

<details>
Здесь текст, который невиден в "details"
</details>

Далее выведем тег "details" прямо здесь:

Пример тега "details"

Для того, чтобы увидеть текст, который скрыт нажмите по кнопке "подробнее"

Здесь текст, который невиден в "details"

Как видим "details" работает без каких либо дополнительных стилей или JavaScript, вся функциональность встроена в сам браузер.

Содержимое тега "details" по-умолчанию скрыто

<details> ... </details>



Как сделать "details" открытым?

Выше пунктом мы узнали, что тег "details" по умолчанию закрыт:

<details>
Здесь текст, который невиден в "details"
</details>

Скрытый текст внутри тега "details"

Здесь текст, который невиден в "details"

Но если нам требуется, чтобы тег "details" был открытым?

Для этого требуется внутри тега добавить атрибут "open"

<details open>
Здесь текст, который виден в "details"
</details>

Пример "details" с атрибутом "open"

Здесь текст, который виден в "details"




Заменить "подробнее" в "details" на свой текст?

Как мы видим в теге "details" по умолчанию выводится слово "подробнее".

Здесь текст, который невиден в "details"

Можно ли "подробнее" заменить на свой текст?

Для этого, после открывающего тега "details" добавляем тег "summary"

<summary>Здесь свой текст</summary>

Код "details" с заменой "подробнее"

<details>
<summary>Здесь свой текст</summary>
Здесь текст, который невиден в "details"
</details>

Пример замененным "подробнее" на свой текст в "details"

Здесь свой текст

Здесь текст, который невиден в "details"




Заменить стандартный маркер у "details"

Стандартный маркер у "details" - выглядит как треугольник, повернутый одной из вершин в правую сторону.

Здесь текст, который невиден в "details"

Если вы хотите "маркер" в "details", заменить на свой, то это можно сделать через css.

Заменим маркер "details" на +:

Для этого нам понадобится:

Html :

<details class="example">
<summary>Открыть details</summary>
Здесь текст, который невиден в "<strong>details</strong>"
</details>

Css :

<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" для создания аккордеона:

Html :

<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 :

<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>

Пример аккордеона на теге "details"

Открыть details
Здесь текст, который невиден в "details"
Открыть details
Здесь текст, который невиден в "details"
Открыть details
Здесь текст, который невиден в "details"