Open close buttons function bootstrap

Question

Я использую bootstrap collapse, чтобы скрыть и показать содержимое на странице, и я хотел бы немного его изменить. Вот пример от Bootply.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button> 
 
     <div id="first" class="collapse"> 
 
     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. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button> 
 
     <div id="second" class="collapse"> 
 
     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. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Допустим, что первый один разомкнут и второй ЗАКРЫТ. Когда я нажимаю на секунду, и он открывается, я бы хотел, чтобы первый запустил CLOSE (и наоборот).

Можно ли это сделать с помощью javascript/jquery? Я все еще изучаю javascript/jquery и мало знаю, поэтому любая помощь будет оценена.

Answer 1

Бутстрап аккордеон без панелей

accordion example требует использования компонента панели. Однако подобное поведение может быть достигнуто с помощью любых блоков.

Вы можете приготовить простой JQuery скрипт, используя следующие ингредиенты:

1. show.bs.collapse event:

   пожары Это событие сразу же, когда метод экземпляра шоу называется.

2. .collapse('hide') method:

   Скрытие разборного элемента.

3. .collapse.in class:

   • .collapse скрывает содержимое
   • .collapse.in показывает содержание

Пожалуйста, проверьте результат : Bootply

$('.collapse').on('show.bs.collapse', function() { 
 
    $('.collapse.in').collapse('hide'); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button> 
 
     <div id="first" class="collapse"> 
 
     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. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-lg-6"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button> 
 
     <div id="second" class="collapse"> 
 
     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. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>