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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb
Страница загружена за : 0.018653 секунд. Подробнее