Как сделать аналог collapse из bootstrap?
1 ответ
от
jazmyne ,
месяц назад
@forest
Чтобы создать аналог Collapse из Bootstrap, вам потребуется использовать JavaScript или jQuery, чтобы управлять видимостью элементов на вашей странице.
Вот пример кода, который может быть использован для создания аналога Collapse:
HTML:
1 2 3 4 |
<button class="collapsible">Нажмите, чтобы свернуть/развернуть</button> <div class="content"> <p>Содержимое, которое будет свернуто/развернуто</p> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
|
JavaScript/jQuery:
1 2 3 4 5 |
$(document).ready(function(){
$(".collapsible").click(function(){
$(".content").toggle();
});
});
|
Вы также можете добавить анимацию к функции toggle, используя метод slideToggle для создания плавного эффекта разворачивания/сворачивания элемента.
Надеюсь, это поможет вам создать аналог Collapse функциональности из Bootstrap.
15