Очень простой сворачиваемый список (чистый HTML CSS JS)
Добро пожаловать на статью о том, как создать сворачиваемый список с помощью HTML, CSS и JavaScript.
index.html
Создаём файл index.html с таким содержимым.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Collapsible List</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- ВЛОЖЕННЫЙ СПИСОК -->
<ul class="collapse">
<li>Один
<ul>
<li>Два</li>
<li>Три</li>
<li>Четыре
<ul>
<li>Пять</li>
<li>Шесть</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="js.js"></script>
</body>
</html>
<html lang="ru">
<head>
<title>Collapsible List</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- ВЛОЖЕННЫЙ СПИСОК -->
<ul class="collapse">
<li>Один
<ul>
<li>Два</li>
<li>Три</li>
<li>Четыре
<ul>
<li>Пять</li>
<li>Шесть</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="js.js"></script>
</body>
</html>
js.js
Создаём файл js.js с таким содержимым.
window.addEventListener("load", () => {
// ПОВЕРНУТЬ ВСЕ ПОДЭЛЕМЕНТЫ
for (let i of document.querySelectorAll(".collapse ul, .collapse ol")) {
// СОЗДАЙТЕ <DIV ONCLICK="TOGGLE">ТЕКСТ</DIV>
let toggle = document.createElement("div");
toggle.innerHTML = i.previousSibling.textContent;
toggle.className = "toggle";
toggle.onclick = () => { toggle.classList.toggle("show") };
// ЗАМЕНИТЕ «ТЕКСТ ЗАГОЛОВКА» НА ПЕРЕКЛЮЧАТЕЛЬ <DIV>
i.parentElement.removeChild(i.previousSibling);
i.parentElement.insertBefore(toggle, i);
}
});
// ПОВЕРНУТЬ ВСЕ ПОДЭЛЕМЕНТЫ
for (let i of document.querySelectorAll(".collapse ul, .collapse ol")) {
// СОЗДАЙТЕ <DIV ONCLICK="TOGGLE">ТЕКСТ</DIV>
let toggle = document.createElement("div");
toggle.innerHTML = i.previousSibling.textContent;
toggle.className = "toggle";
toggle.onclick = () => { toggle.classList.toggle("show") };
// ЗАМЕНИТЕ «ТЕКСТ ЗАГОЛОВКА» НА ПЕРЕКЛЮЧАТЕЛЬ <DIV>
i.parentElement.removeChild(i.previousSibling);
i.parentElement.insertBefore(toggle, i);
}
});
style.css
Создаём файл style.css с таким содержимым.
/* ДЛЯ ВСЕЙ СТРАНИЦЫ */
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
/* CONTAINER */
.collapse, .collapse ul, .collapse ol {
list-style-type: none;
padding-left: 10px;
}
/* СПИСОК ЭЛЕМЕНТОВ */
.collapse li {
padding: 10px;
}
/* ПЕРЕКЛЮЧАТЕЛЬ */
.toggle {
padding: 10px;
}
.toggle::before {
content: "+";
}
.toggle.show::before {
content: "-";
}
/* ПОКАЗАТЬ/СКРЫТЬE */
.collapse ul, .collapse ol {
display: none;
}
.toggle.show + ul, .toggle.show + ol {
display: block;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
/* CONTAINER */
.collapse, .collapse ul, .collapse ol {
list-style-type: none;
padding-left: 10px;
}
/* СПИСОК ЭЛЕМЕНТОВ */
.collapse li {
padding: 10px;
}
/* ПЕРЕКЛЮЧАТЕЛЬ */
.toggle {
padding: 10px;
}
.toggle::before {
content: "+";
}
.toggle.show::before {
content: "-";
}
/* ПОКАЗАТЬ/СКРЫТЬE */
.collapse ul, .collapse ol {
display: none;
}
.toggle.show + ul, .toggle.show + ol {
display: block;
}
Можете посмотреть и скачать пример.
Посмотреть
Скачать
