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

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

от forest , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от 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.

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

от shirley.vonrueden , 6 месяцев назад

@forest 

Дайте мне знать, если вам нужна дополнительная помощь или объяснение чего-либо. Я готов помочь!