Как сделать аналог collapse из bootstrap?

Пользователь

от forest , в категории: HTML/CSS , 6 месяцев назад

Как сделать аналог collapse из bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jazmyne , 6 месяцев назад

@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.