Главная » HTML5 » Каркас документа » details - Дополнительная информация
47 0  

details - Дополнительная информация

5.0 ☒

details - Новый семантический элемент для скрытия дополнительной информации, вместо гамбургеров и баянов теперь все можно сделать на чистом HTML и CSS

Пример использования для выпадающего меню - смотреть

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

 /*--- Стилизация треугольника  ---*/
<style>
summary {
  display: block;  /*--- !!! Нужно добавлять блочный тип чтобы можно было скрывать маркер ---*/
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

</style>

Собственые атрибуты:

Когда блок активный к details добавляется - open.

<details open> 

open:

Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.

Как убрать маркер summary?

Нужно задать для summary тип block! А потом уже добавлять

summary::-webkit-details-marker {
  display: none;
}


fellow Можно влаживать друг в друга:

<details>
    <summary>Вопрос 1</summary>
    <p>Население превышает широкий кристаллический фундамент.</p>
    <details>
        <summary>Приложенные документы</summary>
        <ul>
            <li><a href="#">Болгары очень дружелюбны;</a></li>
            <li>Скумбрия неумеренно перевозит вулканизм;</li>
            <li>Дождливая погода, куда входят Пик-Дистрикт;</li>
            <li>Белый саксаул дегустирует живописный утконос;</li>
        </ul>
    </details>
</details>
 
 Chrome  Edge  Firefox  Internet  Opera  Safari
12 79 49 NO 15 6
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
Yes 12 79 49 15 6 Yes

Проверить на сайте developer.mozilla.org

Оставить свой комментарий:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021