Аналогичная страница — https://1.cbm.ua/?p=4459
<details> — свернут изначально.
<details open> — развернут изначально.
Чтобы при нажатии открывалась дополнительная информация введите такой код:
<details>
<summary>Группа-1</summary>
<pre>
Ветка-1
Ветка-2
...
Ветка-n
</pre>
</details>
Ниже как это будет работать. !!! Можно просто скопировать блок и вставить нужный текст.
Блок HTML:
Группа-1
Ветка-1 Ветка-2 ... Ветка-n
Блок ШортКод:
Группа-1
Ветка-1 Ветка-2 ... Ветка-n
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p, details > pre {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}
</style>
</head>
<body>
<details>
<summary>Группа-1</summary>
<pre>
Ветка-1
Ветка-2
...
Ветка-n
</pre>
</details>
<details>
<summary>System Requirements</summary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
</p>
</details>
</body>
</html>
Результат:
Группа-1
Ветка-1 Ветка-2 ... Ветка-n
System Requirements
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
Во еще пример (нужно удалить лишнее в коде):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оглавление грамматика Немецкого языка. (описание, структура, карта, структура, правила, главы, оглавление)</title>
</head>
<body>
<ul class="tree-padding tree-vertical-lines tree-horizontal-lines tree-summaries tree-markers tree-buttons">
<li>
<details open>
<summary>Планеты гиганты</summary>
<ul>
<li>
<details>
<summary>Газовые</summary>
<ul>
<li>Юпитер</li>
<li>Сатурн</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Ледяные</summary>
<ul>
<li>Уран</li>
<li>Нептун</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</body>
</html>
Результат:
если вместо «<details open>» написать «<details>», то будет так: