В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 15-04-2024! 🞨
Меню :
details (2)



Blog (1400)
php (331)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
form html (30)
online (29)
fonts (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
info (16)
board (16)
php time (16)
color (15)
js events (14)
img (14)
js url (14)
js time (14)
notepad (13)
select (13)
знак (13)
osclass (13)
htaccess (13)
download (12)
table (12)
dw block (12)
php path (12)
keyboard (12)
php img (12)
form (11)
jsphp (11)
icon (11)
js delete (10)
yandex (10)
mouse (10)
keyframes (10)
chart (9)
dosite (9)
hover (9)
browser (8)
php post (7)
comment (7)
php url (7)
canvas (6)
click (6)
list (6)
adminka (6)
mysql (6)
vs code (6)
iframe (6)
php get (6)
js id (5)
js math (5)
reg.ru (5)
value (5)
mb (5)
heading (5)
tag a (5)
year (5)
ftp (5)
base64 (4)
day (4)
submit (4)
week (4)
js form (4)
symbols (4)
month (4)
console (4)
vk (4)
pages (4)
scandir (4)
bbcode (4)
php var (4)
ssl (4)
нок (4)
games (4)
task (4)
xml (4)
line (3)
ucoz (3)
domen (3)
https (3)
куб (3)
money (3)
captcha (3)
numbers (3)
js hash (3)
js post (3)
jquery post (3)
js img (3)
padding (3)
qr kod (2)
seo (2)
js vars (2)
prompt (2)
counter (2)
details (2)
height (2)
video (2)
youtube (2)
sitemap (2)
tag hr (2)
typeof (2)
рся (2)
google (2)
arrows (2)
rutube (1)
cursor (1)
нод (1)
archive (1)
scroll (1)
jino (1)
smile (1)
windows (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"
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
html details summary html details
Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.01857 секунд. Подробнее