WebSite X5Help Center

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

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

Autor: Александр Ч.
Visitado 834, Followers 1, Compartido 0  

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

Publicado en
5 RESPUESTAS
Максим Г.
Максим Г.
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>

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

Leer más
Publicado en de Максим Г.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Маким Г.
Ну если ничего гениального ненадо  то вот держи простой код ... ... ... ... 

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

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

.

ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

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

.

ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Максим Г.
Максим Г.
User
 ‪ KolAsim ‪ ‪
Маким Г. Ну если ничего гениального ненадо  то вот держи простой код ... ... ... ...  ... Хорошо, но нет! эти теги  :

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

Leer más
Publicado en de Максим Г.