WebSite X5Help Center

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

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

Autor: Александр Ч.
Besucht 1179, Followers 1, Geteilt 0  

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

Gepostet am
5 ANTWORTEN
Максим Г.
Максим Г.
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>

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

Mehr lesen
Gepostet am von Максим Г.
 ‪ 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

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

.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Максим Г.
Максим Г.
User
 ‪ KolAsim ‪ ‪
Маким Г. Ну если ничего гениального ненадо  то вот держи простой код ... ... ... ...  ... Хорошо, но нет! эти теги  :

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

Mehr lesen
Gepostet am von Максим Г.