СКРИПТЫ
ТЕГИ:
php (284)
js (166)
html (138)
css (116)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
foto (22)
atom (20)
online (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
php file (16)
html book (16)
js method (16)
color (15)
input (15)
php date (15)
link (15)
js events (14)
htaccess (13)
table (13)
osclass (13)
dw block (12)
path (12)
js delete (12)
select (12)
icon (11)
form (11)
notepad (11)
download (11)
img (11)
php time (11)
keyboard (11)
php img (11)
jsphp (11)
mouse (10)
url (10)
js time (9)
info (9)
yandex (9)
php url (7)
comment (7)
cookie (7)
hover (7)
task (7)
dosite (7)
js url (6)
list (6)
iframe (6)
click (6)
year (6)
mysql (6)
search (5)
ftp (5)
chart (5)
browser (5)
js id (5)
mb (5)
php get (5)
heading (5)
adminka (5)
value (5)
symbols (4)
vk (4)
js form (4)
console (4)
mounth (4)
submit (4)
reg.ru (4)
bbcode (4)
day (4)
week (4)
captcha (3)
js img (3)
ucoz (3)
line (3)
ssl (3)
scandir (3)
pages (3)
js post (3)
https (3)
vs code (3)
padding (3)
рся (2)
second (2)
money (2)
youtube (2)
video (2)
typeof (2)
seo (2)
sitemap (2)
title (2)
tag hr (2)
cursor (2)
js vars (2)
counter (2)
arrows (2)
base64 (2)
qr kod (2)
height (2)
details (2)
archive (1)
numbers (1)
domen (1)
books (1)
куб (1)
scroll (1)
smile (1)
header (1)
windows (1)
google (1)
speed (1)

Тег details

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

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

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

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

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

    Код тега "details"

    <details>
    Здесь текст, который невиден в "details"
    </details>
    Далее выведем тег "details" прямо здесь:

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

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

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

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

    <details> ... </details>


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

    Выше пунктом мы узнали, что тег "details" по умолчанию закрыт:
    <details>
    Здесь текст, который невиден в "details"
    </details>
    Скрытый текст внутри тега "details"
    Здесь текст, который невиден в "details"
    Но если нам требуется, чтобы тег "details" был открытым?

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

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

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

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


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

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

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

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

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

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

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

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


  4. Заменить стандартный маркер у "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"


  5. Аккордеон на теге "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"

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
html details summary
html details
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
Михаил :
02.06.2022 14:33
Ну вот только для этого может быть :) А так, нет смысла…
подробнее.
Алексей :
26.05.2022 14:19
👍👍👍
подробнее.
ruweb
Страница загружена за : 0.020399 секунд. Подробнее