WebSite X5Help Center

 
Александр Ч.
Александр Ч.
User

Выпадающий список документов  ru

Автор: Александр Ч.
Просмотрено 1226, Подписчики 1, Размещенный 0  

  1. Как сделать выпадающий список, нужно сделать смету на сайт , но чтобы все позиции сразу не видны были , разделами , есть ли такая возможность в программе?

Размещено
5 Ответы
Максим Г.
Максим Г.
User

Ну если ничего гениального ненадо  то вот держи простой код

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>

</body>
</html>

Текст сам поменяешь   стили можешь подкинуть 

Читать больше
Размещено От Максим Г.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT
Маким Г.
Ну если ничего гениального ненадо  то вот держи простой код ... ... ... ... 

... Хорошо, но нет! эти теги wink :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Accordion</h2>
</body>
</html>

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

(It > Ru) ... или на этой странице, уже отформатированной со всеми видимыми разделами, было применено мое эксклюзивное изобретение, чтобы закрывать и открывать разделы, щелкая по их заголовкам ...

> LINK образец страницы:  https://osteopathfabio.com/article-download-file-document-exercise.html
> Справочная тема: https://helpcenter.websitex5.com/ru/post/230436

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Максим Г.
Максим Г.
User
 ‪ KolAsim ‪ ‪
Маким Г. Ну если ничего гениального ненадо  то вот держи простой код ... ... ... ...  ... Хорошо, но нет! эти теги  :

Ну я же в общих чертах)))

Читать больше
Размещено От Максим Г.