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

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.0318 секунд. Подробнее