СКРИПТЫ
ТЕГИ:
php (319)
js (238)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
Показать еще :
online (25)
ruweb.net (24)
foto (22)
php file (21)
atom (20)
forum (19)
hosting (18)
svg (18)
php date (17)
board (16)
html book (16)
input (16)
php time (16)
color (15)
js events (14)
js url (14)
notepad (13)
osclass (13)
htaccess (13)
img (13)
js time (13)
php img (12)
select (12)
знак (12)
table (12)
dw block (12)
info (12)
php path (12)
download (11)
keyboard (11)
jsphp (11)
form (11)
icon (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
year (6)
mysql (6)
iframe (6)
browser (6)
list (6)
click (6)
php get (6)
adminka (5)
tag a (5)
js math (5)
chart (5)
heading (5)
reg.ru (5)
mb (5)
search (5)
ftp (5)
js id (5)
value (5)
base64 (4)
week (4)
day (4)
ssl (4)
bbcode (4)
нок (4)
vk (4)
js form (4)
submit (4)
php var (4)
month (4)
pages (4)
symbols (4)
task (4)
console (4)
куб (3)
captcha (3)
domen (3)
js post (3)
line (3)
ucoz (3)
numbers (3)
padding (3)
js img (3)
https (3)
js hash (3)
vs code (3)
scandir (3)
рся (2)
seo (2)
prompt (2)
counter (2)
height (2)
google (2)
details (2)
js vars (2)
video (2)
sitemap (2)
tag hr (2)
youtube (2)
arrows (2)
typeof (2)
money (2)
qr kod (2)
нод (1)
rutube (1)
jino (1)
cursor (1)
header (1)
speed (1)
windows (1)
archive (1)
smile (1)
scroll (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
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.020712 секунд. Подробнее