Bootstrap 3 - Аккордеон

Сегодня мы познакомимся с возможностями Twitter Bootstrap для создания аккордеона.

Создание аккордеона с помощью Twitter Bootstrap

Аккордеон обычно применяется для создания на сайте меню или навигации, в которые необходимо поместить много контента и навигационные списки. Следующий пример покажет вам, как создать аккордеон, используя компонент collapse (сворачивание):

<div class="panel-group" id="accordion">
  <!-- 1 панель -->
  <div class="panel panel-default">
    <!-- Заголовок 1 панели -->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Bootstrap 3 - Введение</a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <!-- Содержимое 1 панели -->
      <div class="panel-body">
        <p>Bootstrap 3 - это framework для быстрого и гармоничного создания дизайна сайта. Начать изучать эту технологию лучше с <a href="http://itchief.ru/lessons/bootstrap-3/19-introduction-to-twitter-bootstrap-3" target="_blank">урока</a>, который познакомит вас с её возможностями и преимуществами.</p>
      </div>
    </div>
  </div>
  <!-- 2 панель -->
  <div class="panel panel-default">
    <!-- Заголовок 2 панели -->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Bootstrap 3 - Начало работы</a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <!-- Содержимое 2 панели -->
      <div class="panel-body">
        <p>Изучение технологии лучше всего начать с простого <a href="http://itchief.ru/lessons/bootstrap-3/20-lesson-2-getting-started-with-twitter-bootstrap-3" target="_blank">урока</a>. На котором изучается как подключить Twitter Bootstrap к своему проекту и вывести с помощью него простейший текст.</p>
      </div>
    </div>
  </div>
  <!-- 3 панель -->
  <div class="panel panel-default">
    <!-- Заголовок 3 панели -->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Bootstrap 3 - Создание сайта</a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <!-- Содержимое 3 панели -->
      <div class="panel-body">
        <p>Создание сайта - это трудоемкий процесс, который состоит из нескольких этапов. В качестве примера рассмотрим создание сайта визитки на этом <a href="http://itchief.ru/lessons/bootstrap-3/website-creation-business-cards-(part-1)" target="_blank">уроке</a>, в котором рассмотрим процесс загрузки необходимых пакетов и проектирования макета сайта.</p>
      </div>
    </div>
  </div>
</div>

Bootstrap 3 - это framework для быстрого и гармоничного создания дизайна сайта. Начать изучать эту технологию лучше с урока, который познакомит вас с её возможностями и преимуществами.

Изучение технологии лучше всего начать с простого урока. На котором изучается как подключить Twitter Bootstrap к своему проекту и вывести с помощью него простейший текст.

Создание сайта - это трудоемкий процесс, который состоит из нескольких этапов. В качестве примера рассмотрим создание сайта визитки на этом уроке, в котором рассмотрим процесс загрузки необходимых пакетов и проектирования макета сайта.

Разворачивание и сворачивание панелей аккордеона через атрибуты data

Twitter Bootstrap позволяет разворачивать и сворачивать любую панель аккордеона без написания кода на языке JavaScript. Данную возможность Twitter Bootstrap мы уже рассмотрели выше, теперь давайте узнаем какие прикладные интерфейсы API Data за это отвечают. Но перед тем как перейти к рассмотрению атрибутов data, давайте познакомимся поближе с работой компонента аккордеон. Аккордеон состоит из панелей, каждая из которых, в свою очередь, состоит из заголовка и содержимого. В заголовке обычно располагается ссылка или кнопка, при нажатии на которую происходит сворачивание или разворачивание содержимого.

Атрибут data-toggle="collapse" необходимо добавить к элементу управления (например, кнопка или ссылка, нажав на которую вы хотите свернуть другой элемент, содержащий контент). А также необходимо указать какой именно элемент вы хотите свернуть, для этого необходимо добавить к элементу управления атрибутом data-target (для кнопки) или href (для ссылки) со значением идентификатора того элемента который необходимо свернуть.И ещё Не забудьте добавить класс .collapse к сворачиваемому элементу. Если вы хотите, чтобы элемент с содержимым по умолчанию был открыт, то необходимо дополнительно добавить класс .in.

<!-- HTML код управляемого элемента -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleSample" value="Элемент управления">
<!-- HTML код сворачиваемого элемента -->
<div id="toggleSample" class="collapse in">
  <p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; padding: 8px;">
На этом примере показана возможность сворачивания и разворачивания элемента с помощью data атрибутов. Нажмите на <b>кнопку</b>, чтобы увидеть этот эффект.
  </p>
</div>

На этом примере показана возможность сворачивания и разворачивания элемента с помощью data атрибутов. Нажмите на кнопку, чтобы увидеть этот эффект.

Разворачивание и сворачивание панелей аккордеона с помощью JavaScript

Вы также можете сворачивать и разворачивать панели аккордеона вручную с помощью кода JavaScript - для этого вызовите метод Bootstrap collapse() и укажите с помощью идентификатора (#id) или класса (.class) тот элемент, который необходимо развернуть и свернуть.

<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggleSample2").collapse('toggle');
    });
});
</script>

...

<!-- HTML код управляемого элемента -->
<input type="button" class="btn btn-primary" value="Toggle Button">
<!-- HTML код сворачиваемого элемента -->
<div id="toggleSample2" class="collapse in"><p>На этом примере показана возможность сворачивания и разворачивания элемента с помощью кода JavaScript. Нажмите на <b>кнопку</b>, чтобы увидеть этот эффект.</p></div>

На этом примере показана возможность сворачивания и разворачивания элемента с помощью кода JavaScript. Нажмите на кнопку, чтобы увидеть этот эффект.

Параметры

Есть определенные параметры, которые могут быть переданы методу Bootstrap collapse() для настройки функциональности сворачиваемого элемента.

Имя Тип Описание
parent selector Значение по умолчанию: false.
В качестве selector используется идентификатор или имя класса управляемого элемента. При открытии панели аккордеона, управляемый элемент, который имеет идентификатор или класс родительского контейнера, закрывает другие панели, находящиеся в этом же родительском контейнере.
toggle boolean Значение по умолчанию: true.
В зависимости от значения параметра включает или не включает сворачивание и разворачивание элемента аккордеона при вызове метода.

Вы также можете установить эти параметры с помощью атрибутов data для аккордеона. Для этого добавьте имя параметра к атрибуту data-, например: data-parent="myAccordion", data-toggle="false" и т.д., как на примере в самом начале урока.

Методы

Метод Описание Пример
.collapse(параметры) Метод активирует ваш контент как сворачиваемый элемент и применяет к нему параметры, указанные в скобках. $('#id').collapse({ toggle: false })
.collapse('toggle') Метод toogle переключает (показывает или скрывает) сворачиваемый элемент. $('#id').collapse('toggle')
.collapse('show') Метод show показывает сворачиваемый элемент. $('#id').collapse('show')
.collapse('hide') Метод hide скрывает сворачиваемый элемент. $('#id').collapse('hide')

На следующим примере продемонстрированы использование различных методов для сворачиваемых элементов:

<script type="text/javascript">
$(document).ready(function(){
  $(".toggle-false").click(function(){
    $("#myMethod").collapse({
      toggle: false
    });
  });
  $(".show-btn").click(function(){
    $("#myMethod").collapse('show');
  });
  $(".hide-btn").click(function(){
    $("#myMethod").collapse('hide');
  });
  $(".toggle-btn").click(function(){
     $("#myMethod").collapse('toggle');
  });
});
</script>

<!-- HTML код управляемого элемента -->
<input type="button" class="btn btn-primary toggle-false" value="Collapse с параметром toggle">
<input type="button" class="btn btn-primary show-btn" value="Метод Show">
<input type="button" class="btn btn-primary hide-btn" value="Метод Hide">
<input type="button" class="btn btn-primary toggle-btn" value="Метод Toggle">

<!-- Collapsible Element HTML -->
<div id="myMethod">
  <p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; padding: 8px;">Следующий пример демонстрирует методы Bootstrap для сворачиваемых элементов. Нажмите на кнопки чтобы увидеть работу этих методов.</p>
</div>

Следующий пример демонстрирует методы Bootstrap для сворачиваемых элементов. Нажмите на кнопки чтобы увидеть работу этих методов.

События

Сворачиваемый элемент Bootstrap имеет несколько событий, которые возникают при наступлении определенных условий и, которые предназначены для расширения его функциональности.

Событие Описание
show.bs.collapse Это событие срабатывает сразу после вызова метода show().
shown.bs.collapse Это событие срабатывает, когда сворачиваемый элемент становится виден для пользователя, т.е. когда будет завершён полностью процесс CSS для сворачиваемого элемента.
hide.bs.collapse Это событие срабатывает сразу после вызова метода hide.
hidden.bs.collapse Это событие сработает в тот момент, когда сворачиваемый элемент будет полностью скрыт от пользователя, т.е. событие будет ждать до тех пор, пока процесс CSS для сворачиваемого элемента будет полностью завершён.

В следующем примере продемонстрирована возможность отображения предупреждающего сообщения для пользователя, когда он открывает сворачиваемый элемент, и он полностью завершил своё открытие.


<script type="text/javascript">
$(document).ready(function(){
  $('#myEvent').on('shown.bs.collapse', function(){
    alert('Сворачиваемый элемент полностью завершил своё открытие.');
  });
});
</script>

...

<!-- HTML код управляемого элемента -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myEvent" value="Элемент управления">
<!-- HTML код сворачиваемого элемента -->
<div id="myEvent" class="collapse"><p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; 	padding: 8px;">На этом примере продемонстрирована возможность обработки события при полном открытии сворачиваемого элемента.</p></div>

Пример обработки события при полном открытии сворачиваемого элемента


   Bootstrap 0    25808 0

Комментарии (62)

  1. Станислав # 0
    Подскажите пожалуйста что не так в этом куске кода?

    Панель отображается открытой, но при нажатии не сворачивается/разворачивается.
    <div class="panel panel-default"> 
          <div class="panel-heading"> 
            <h4 class="panel-title"> <a class="accordion-toggle" href="#accordion1_2" target="_parent" > 2.1. Вопрос-Ответ </a></h4>
           </div>
         
          <div id="accordion1_2" class="panel-collapse collapse in"> 
            <div class="panel-body"> 
              <p>Q: Как сделать пересчет суммы в корзине?</p>
             
              <p>A: После редактирования списка товаров нажмите на кнопку "Пересчитать"</p>
             
              <ul> </ul>
             </div>
           </div>
         </div>
    
    
    1. Александр Мальцев # 0
      Необходимо добавить к элементу a атрибут data-toggle=«collapse».
      ...
      <a data-toggle="collapse" class="accordion-toggle" href="#accordion1_2" target="_parent">
      ...
      
    2. Julja # 0
      Весьма доходчиво. Однако, как сделать этот аккордеон вертикальным? это возможно с панелями или есть альтернативный вариант?
      1. Александр Мальцев # 0
        Так просто его переделать не получится. Появится время, попробую поэкспериментировать с панелями и сообщу Вам результат.

        А пока можете поискать их в интернете, там их достаточно много…
        1. Александр Мальцев # 0
          Можно сделать так.
          Демо аккордеона
          Код CSS:
          article.accordion {
            display: block; overflow: auto; width: 663px; margin: 0 auto; 
          }
          article.accordion section {
            position: relative; display: block; float: left; width: 37px; height: 300px; margin: 3px 0 3px 3px;
            color: #337AB7; background-color: #337AB7; overflow: hidden; border-radius: 3px; border: 1px solid #337AB7; 
          }
          article.accordion section h2 {
            position: absolute; font-size: 16px; width: 300px; height: 37px; top: 300px; left: 0; text-indent: 1em;
            padding: 0; margin: 0; color: #fff; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);
          }
          article.accordion section h2 a {
            display: block; width: 100%; line-height: 37px; text-decoration: none; color: inherit; outline: 0 none;
          }
          article.accordion section:target {
            width: 500px; padding: 0 15px; color: #333; background-color: #fff; 
          }
          article.accordion section:target h2 {
            position: static; font-size: 16px; text-indent: 0; color: #333; -webkit-transform: rotate(0deg);   -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
          }
          article.accordion section, article.accordion section h2 {
            -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease;   -o-transition: all 0.3s ease; transition: all 0.3s ease;
          }
          
          Код HTML:
          <article class="accordion">
            <section id="acc1">
              <h2><a href="#acc1">Раздел 1</a></h2>
              <p>...</p>
            </section>
            <section id="acc2">
              <h2><a href="#acc2">Раздел 2</a></h2>
              <p>...</p>
            </section>
            <section id="acc3">
              <h2><a href="#acc3">Раздел 3</a></h2>
              <p>...</p>
            </section>
            <section id="acc4">
              <h2><a href="#acc4">Раздел 4</a></h2>
              <p>...</p>
            </section>
            <section id="acc5">
              <h2><a href="#acc5">Раздел 5</a></h2>
              <p>...</p>
            </section>
          </article>
        2. Игорь # 0
          Здравствуйте!
          Такая ситуация:
          Одностраничный сайт.
          Стандартное меню bootstrap.
          При нажатии на пункт меню с мобильного, само меню не сворачивается, а остается поверх контента.
          Видел решение, когда меню при раскрытии сдвигает контент, возможно есть какие то другие решения? Подскажите пожалуйста

          Ссылка на скрин — yadi.sk/i/caHPBx4UiGWF8

          <nav class="navbar navbar-default navbar-fixed-top">
                		<div  id="nav" class="container">
                  	<div class="navbar-header">
                     		 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          
                      	<span class="sr-only">Открыть навигацию</span>
                      	<span class="icon-bar"></span>
                      	<span class="icon-bar"></span>
                      	<span class="icon-bar"></span>
                    		</button>
          
                  	</div>
                  <div class="navbar-collapse collapse" id="navbar" >
                    <ul class="nav navbar-nav">
                      <li><a class ="a_nav" href="/">Главная</a></li>
                      <li><a class ="a_nav" href="#screen1">Как это работает</a></li>
                      <li><a class ="a_nav" href="#screen2">Зачем это мне</a></li>
                      <li><a class ="a_nav" href="#screen3">О компании</a></li>
                      <li><a class ="a_nav" href="#screen4">Контакты</a></li>
                      
                      </ul>
           			<ul class="nav navbar-nav navbar-right">
           				<li class="tel">8 (499) 372-04-72</li>
                  		<li><a href="https://www.youtube.com/channel/UC2URwxPq11yfNqalOqlmLKQ" target = _blank><i class="fa fa-youtube-square fa-lg fa-circle"></i></a></li>
                      <li><a href="http://vk.com/hsatraining" target = _blank><i class="fa fa-vk fa-lg fa-circle"></i></a></li>
                		</ul>
          
                  </div>
                </div>
          </nav>	
          
          
          1. Александр Мальцев # +1
            Здраствуйте.
            В Twitter Bootstrap такая настройка выставлена по умолчанию. Т.е. когда Вы нажимаете на пункт меню, оно остаётся открытым.
            Для того чтобы данное меню можно было использовать на одностраничных сайтах можно воспользоваться следующим решением (т.е. оно будет сворачиваться всякий раз, когда пользователь нажимает на пункт, содержащий ссылку):
            $(function() {
              $(document).on('click','.navbar-collapse.in',function(e) {
                if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                  $(this).collapse('hide');
                }
              });
            });
            
            Меню на сайтах также можно выполнить в виде кнопок, расположенных горизонтально или вертикально. Кроме этого очень часто на сайтах еще используют выезжающие меню с левой или правой стороны.
            1. Игорь # 0
              Огромное спасибо! У Вас отличный ресурс. Добавил в закладки
          2. Артем # 0
            При клике на кнопку «Collapse с параметром toggle» сворачивается и разворачивается не текст под ней, как это задумано, а вот этот текст «На этом примере показана возможность сворачивания и разворачивания элемента с помощью кода JavaScript. Нажмите на кнопку, чтобы увидеть этот эффект.» Находящийся выше нашей кнопки
            1. Александр Мальцев # 0
              Спасибо, Артём. Поправил код.
            2. Павел # 0
              Привет
              скажи а можно ли сделать чтобы свертывание и развертывание
              происходило по нажатии по панели, сейчас по тексту в панели.
              1. Александр Мальцев # 0
                Привет, можно.

                Для этого необходимо все data-атрибуты добавлять к заголовку панели.
                Например:
                <!-- 1 панель -->
                <div class="panel panel-default">
                  <!-- Заголовок 1 панели -->
                  <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne">
                    <h4 class="panel-title">
                      Заголовок панели
                    </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                    <!-- Содержимое 1 панели -->
                    <div class="panel-body">
                      ...
                    </div>
                  </div>
                </div>
                
              2. Виталий # 0
                Подскажите пожалуйста как эту штуку использовать в modx revo.
                1. Александр Мальцев # 0
                  Если Вам нужно статический вывод то используйте её в шаблоне или чанке.
                  Если Вы хотите её формировать, то выберите для этого подходящий сниппет…
                2. Дмитрий # 0
                  Доброго дня, Александр!
                  подскажите как сделать чтобы активное (раскрытое) поле panel-heading подсвечивалось заданным цветом?
                  1. Александр Мальцев # 0
                    Здравствуйте, Дмитрий!
                    Это можно выполнить с помощью скрипта:
                    // после загрузки страницы
                    $(function() {
                      // изменить цвет фона открытой panel-heading на активный
                      $('#accordion .collapse.in').prev().css("backgroundColor", "#5be08d");
                      // при открытии панели изменяем цвет фона panel-heading на активный
                      $('#accordion .collapse').on('show.bs.collapse', function () {
                        $(this).prev().css("backgroundColor", "#5be08d");
                      })
                      // при закрытии панели изменяет цвет фона на неактивный
                      $('#accordion .collapse').on('hide.bs.collapse', function () {
                        $(this).prev().css("backgroundColor", "#f5f5f5");
                      })
                    });
                    
                    1. Александр Мальцев # 0
                      Или лучше это сделать с помощью классов.
                      В этом случае скрипт будет такой:
                      $(function() {
                        $('#accordion .collapse.in').prev().addClass("active-panel");
                        $('#accordion .collapse').on('show.bs.collapse', function () {
                          $(this).prev().addClass("active-panel");
                        })
                        $('#accordion .collapse').on('hide.bs.collapse', function () {
                          $(this).prev().removeClass("active-panel");
                        })
                      });
                      
                      И соответственно необходимо добавить в CSS:
                      .active-panel {
                        background-color: #5be08d !important;
                      }
                      
                      1. Егор # 0
                        Спасибо. Все время нет изучить JS и jQuery, пытался самостоятельно добавить класс к раскрытой панели, не получилось. Ну и у вас, естественно нашел, что искал.
                    2. Дмитрий # 0
                      Спасибо за помощь. Развития вам в Новом году.
                      1. Александр Мальцев # 0
                        Спасибо, Дмитрий.
                      2. Кирилл # 0
                        Добрый день. Огромное спасибо за уроки все очень доходчиво и понятно.
                        У меня возник вопрос: как сделать так что бы данные списки в меню при загрузке страницы были закрыты (сейчас при загрузке страницы — 1ый список всегда открыт, после переходов уже все поочередно открывается и закрывается)
                        1. Кирилл # 0
                          хотя уже все, разобрался надо просто убрать лишний класс
                          class="panel-collapse collapse in">
                          «IN»
                        2. Денис # 0
                          Добрый день,
                          у меня есть два блока, при нажатии на один второй должен быть скрытым, и наоборот при нажатии 2ого первый скрываться.

                          Как такое можно осуществить?

                          1. Александр Мальцев # 0
                            Здравствуйте.
                            Для этого необходимо написать код на JavaScript (+jQuery):
                            <div id="div1">
                            1
                            </div>
                            <div id="div2" style="display:none">
                            2
                            </div>
                            
                            <script>
                            $(function(){
                              $('#div1').click(function(){
                                $(this).hide();
                                $('#div2').show();
                              });
                              $('#div2').click(function(){
                                $(this).hide();
                                $('#div1').show();
                              });  
                            });
                            </script>
                            
                          2. kasadas # 0
                            А почему мой вопрос удалили?
                            1. Александр Мальцев # 0
                              Никто вопрос не удалял, просто Вы его оставили не в этом месте, а вот здесь
                              HTML-код аккордеона
                              <nav class="panel panel-danger">
                                <div class="panel-heading">
                                  <h5 class="panel-title">
                                    Название панели
                                  </h5>
                                </div>
                                <div class="panel-body">
                                  <div class="panel-group" id="panel">
                                   
                                    <div class="panel panel-default">
                                      <div class="panel-heading">
                                        <h6 class="panel-title">
                                          <a data-toggle="collapse" data-parent="#panel" href="#panel1">
                                            Название 1 панели
                                          </a>
                                        </h6>
                                      </div>
                                      <div id="panel1" class="panel-collapse collapse">
                                        <div class="panel-body">
                                          Содержимое 1 панели...
                                        </div>
                                      </div>
                                    </div>
                                   
                                    <div class="panel panel-default">
                                      <div class="panel-heading">
                                        <h6 class="panel-title">
                                          <a data-toggle="collapse" data-parent="#panel" href="#panel2">
                                            Название 2 панели
                                          </a>
                                        </h6>
                                      </div>
                                      <div id="panel2" class="panel-collapse collapse">
                                        <div class="panel-body">
                                          Содержимое 2 панели...
                                        </div>
                                      </div>
                                    </div>
                              
                                  </div>
                                </div>
                              </nav>
                              

                            2. Андрей # 0
                              Доброго времени суток, Александр.

                              Можно ли сделать активным все поле как ссылку для открытия Аккордеона, не наводя на саму ссылку как в примере 1 на этой странице… ( Заголовок 1 панели )?
                              1. Александр Мальцев # 0
                                Посмотрите ответ в этом комментарии.
                              2. Максим # 0
                                Доброго времени суток!
                                Есть 5 ссылок на странице1. Есть аккордеон на странице2. Как сделать чтобы при переходе на страницу2 с аккордеоном открывался блок с той ссылкой по которой мы кликнули на странице1? Типа ссылка3 открывает содержимое блока3.
                                1. Александр Мальцев # 0
                                  Добавить на 1 странице к ссылкам хэш:
                                  <a href="index2.html#collapseOne">Страница 2 (вкладка 1)</a>
                                  <a href="index2.html#collapseTwo">Страница 2 (вкладка 2)</a>
                                  <a href="index2.html#collapseThree">Страница 2 (вкладка 3)</a>
                                  <!-- collapseOne, collapseTwo, collapseThree - id блоков аккордеона -->
                                  
                                  На второй странице (index2.html) добавить скрипт. Он будет считывать хэш и активировать ту или иную вкладку. Если хэш не найден, то будет активировать 1 блок.
                                  <script>
                                  $(function(){
                                    var hash = window.location.hash;
                                    $('.panel-collapse').hide();
                                    $('.panel-collapse').each(function(){
                                      $(this).removeClass('in');
                                    });
                                    if (hash) {
                                      $(hash).show().addClass('in');
                                    }
                                    else {
                                      $('#collapseOne').show().addClass('in');
                                    }
                                  });
                                  </script>
                                  
                                  1. Максим # 0
                                    Большое спасибо, Александр!
                                    1. Сергей # 0
                                      Здравствуйте, Александр!
                                      При переходе по ссылке с хэш открывается нужная вкладка.
                                      Но далее если на странице есть меню с другими вкладками, то они не работают.
                                      Скрипт читает url в котором #collapseOne и всегда показывает этот слой.
                                      Видимо надо сделать как то по другому.
                                      Если хэша нет, то как бы и скрипта нет. Т.к. нужный открытый слой можно выбрать и самому параметром in.
                                      Если есть хэш, то открыть нужный слой и как бы убрать скрипт из работы.
                                      Что бы он срабатывал 1 раз при загрузке страницы и больше не мешал отрабатывать бутстрапу.
                                      1. Александр Мальцев # 0
                                        Здравствуйте. Попробуйте следующий скрипт:
                                        $(function(){
                                          var hash = window.location.hash;
                                          // accordion - id аккордеона, в котором необходимо управлять панелями с помощью хэша
                                          $("#accordion .panel-collapse").removeClass('in');
                                          if (hash) {
                                            $("#accordion "+hash).addClass("in");
                                          }  
                                        });
                                        
                                        1. Сергей # 0
                                          Александр, большое спасибо, что откликнулись. У вас отличный сайт и вы отлично его развиваете.
                                          В общем я подошел по другому к решению этого вопроса. Я решил не вмешиваться в работу collapse.js, тем паче таким грубым способом, меняя в обход класс in.
                                          Я с эмулировал работу плагина через событие клика.
                                          var hash = window.location.hash;
                                          jQuery(document).ready( function() { jQuery('hash').trigger("click"); } );
                                          
                                          Остается только добавить в ссылку id. Если hash = #el1, то id = el1
                                          <a href="index2.html#collapseOne" id="el1">Страница 2 (вкладка 1)</a>
                                          Еще раз спасибо!!!
                                  2. Дмитрий # 0
                                    Александр, здравствуйте! Отложил я в свое время погружение в JS, о чем теперь люто сожалею, и прошу вашей помощи) Подскажите, как сделать сворачивание одного collapse при открытии другого в такой верстке:

                                    ba.streetsites.ru/test2.html
                                    Код:
                                    <!-- Bootstrap Core CSS -->
                                        <link href="/assets/ba/css/bootstrap.min.css" rel="stylesheet">
                                        <!-- jQuery--> 
                                        <script src="/assets/ba/js/jquery.js"></script>
                                        <!-- Bootstrap Core JavaScript -->
                                        <script src="/assets/ba/js/bootstrap.min.js"></script>
                                        
                                        
                                    <div class="container">
                                    <div class="row">
                                    
                                    <div class="panel-group" id="accordion">
                                     
                                     
                                      <!-- 1 панель -->
                                      <div class="col-md-4">
                                      <div class="panel panel-default">
                                        <!-- Заголовок 1 панели -->
                                        <div class="panel-heading">
                                          <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. col-md-4</a>
                                          </h4>
                                        </div>
                                        </div>
                                        </div>
                                        
                                     
                                      <!-- 2 панель -->
                                      <div class="col-md-4">
                                      <div class="panel panel-default">
                                        <!-- Заголовок 2 панели -->
                                        <div class="panel-heading">
                                          <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. col-md-4</a>
                                          </h4>
                                        </div>
                                        </div>
                                        </div>
                                      
                                      
                                      <!-- 3 панель -->
                                      <div class="col-md-4">
                                      <div class="panel panel-default">
                                        <!-- Заголовок 3 панели -->
                                        <div class="panel-heading">
                                          <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. col-md-4</a>
                                          </h4>
                                        </div>
                                        </div>
                                        </div>
                                    
                                    
                                            <hr>
                                           
                                        <div class="col-md-12">    
                                        <div id="collapseOne" class="panel-collapse collapse">
                                         <div class="panel-body">
                                            <p>div class="col-md-12"</p>
                                            <img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a>
                                          </div>
                                        </div>
                                        </div>
                                        
                                        
                                        <div class="col-md-12"> 
                                        <div id="collapseTwo" class="panel-collapse collapse">
                                          <div class="panel-body">
                                            <p>div class="col-md-12"</p>
                                            <img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a>
                                          </div>
                                        </div>
                                         </div>
                                        
                                        <div class="col-md-12">
                                        <div id="collapseThree" class="panel-collapse collapse">
                                          <div class="panel-body">
                                            <p>div class="col-md-12"</p>
                                            <img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a>
                                          </div>
                                        </div>
                                        </div> 
                                         </div>
                                         </div>
                                         
                                         
                                         <div class="row">
                                    <div class="col-lg-12">
                                    <h2 class="page-header">header</h2>
                                    </div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    
                                    <div class="col-md-3 col-sm-6"><a href="portfolio-item.html"><img alt="" class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" /> </a></div>
                                    </div>
                                    <!-- /.row --><!-- Features Section -->
                                    
                                    </div>
                                         
                                         <script>
                                    $(function() {
                                      $('.btn').on('click', function(e) {
                                        e.preventDefault();
                                        $('.panel-collapse').each(function() { // закрыть все панели
                                          $(this).css('display', 'none');
                                        });
                                        var block = $(this).attr('href'); // найти блок по id в ссылке
                                        if($(block).css('display')=='block'){
                                            $(block).css('display', 'none');
                                          }
                                          else{
                                            $(block).css('display', 'block');
                                          }
                                        
                                      
                                      });
                                    });
                                    </script>
                                    
                                    
                                    1. Александр Мальцев # 0
                                      Данную задачу можно решить через замыкания JavaScript. Замыкание нам необходимо чтобы сохранить информацию о предыдущем состоянии панели.
                                      Решение будет следующим:
                                      <script>
                                      $(function() {
                                      
                                        var accordion = function(){
                                          var currentPanel = $('#accordion .panel-collapse.in');
                                          console.log('currentPanel='+currentPanel);
                                          var idCurrentPanel = currentPanel.attr('id');
                                          console.log('idCurrentPanel='+idCurrentPanel);
                                          var currentHref;
                                          if (idCurrentPanel) {
                                            currentHref = '#'+idCurrentPanel;
                                          }
                                          console.log('currentHref='+currentHref);
                                          return function(myHref) {
                                            console.log('href='+myHref);
                                            var newPanel = $('#accordion ' + myHref);
                                            console.log(newPanel);
                                            var idNewPanel = newPanel.attr('id');
                                            console.log('idNewPanel='+idNewPanel);
                                            console.log('idCurrentPanel='+idCurrentPanel);
                                            if(idCurrentPanel!=idNewPanel) {
                                              if (currentPanel) {
                                                currentPanel.removeClass('in');
                                              }
                                              newPanel.addClass('in');
                                              currentHref = myHref;
                                              currentPanel = newPanel;
                                              idCurrentPanel = idNewPanel;
                                            }
                                            else {
                                              currentPanel.toggleClass('in');
                                            }
                                          };
                                        };
                                        
                                        var accrdn = accordion();
                                      
                                        $('#accordion a[data-toggle="collapse"]').click(function(e) {
                                          e.preventDefault();
                                          e.stopPropagation();
                                          accrdn($(this).attr('href'));
                                        });
                                      
                                      });
                                      </script>
                                      
                                      1. Дмитрий # 0
                                        Александр, спасибо огромное! Буду разбирать ваш код для понимания процесса. У вас отличный ресурс — есть что почитать, и советом вот помогли) Спасибо еще раз!
                                    2. alan # 0
                                      Добрый день, Александр, подскажите, пожалуйста, есть ли способ реализации ниже приведенной задачи:

                                      Задача: имеется список элементов(платежи в системе, количество их не известно), он обновляется/добавляется автоматически по оплате. При нажатии на элемент, должен выпадать «аккордеон» с подробной информацией о платеже.

                                      Проблема: при нажатии на любой существующий платеж, открывается первый и только первый элемент из всего списка…
                                      если, я правильно понимаю, то, у каждого элемента для открытия должен быть уникальный id… такой синтаксис не правильный

                                      <tr th:each="pay: ${pays}">
                                                      <td colspan="7">
                                                          <table>
                                                              <tr>
                                                                  <td><a href="#" data-toggle="collapse" data-target="#${pay.id}" class="clickable glyphicon glyphicon-chevron-right"></a>
                                      или это решается совсем другим образом?
                                      1. Александр Мальцев # 0
                                        Добрый. Вам необходимо написать цикл, который будет переберать все платежи в системе и информацию о них. Идентификатор, который у Вас содержится в data-target должен соответствовать id блоку, который необходимо отображать при нажатию на эту ссылку. Т.е. каждая ссылка должна содержать уникальный идентификатор того элемента, который она должна открыть.
                                        1. alan # 0
                                          Да, спасибо, не правильно указывал именно id
                                      2. Olga # 0
                                        Подскажите пожалуйста, как сделать ссылку на содержимое вкладки аккордеона?
                                        Аккордеон и пункты меню будут на одной странице.
                                        Нужно сделать так, чтобы когда кликали на «Вкладка 1» Открывался пункт меню «Вкладка 1» с содержимым текстом, и так же для «Вкладка 2» и т.д

                                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                                        <!-- Latest compiled and minified CSS -->
                                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
                                        
                                        <!-- Latest compiled and minified JavaScript -->
                                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
                                        
                                        <!-- Меню на первой странице index.html -->
                                        <nav class="navbar navbar-default">
                                          <ul class="nav navbar-nav navbar-right">
                                            <li><a href="#collapse-1">Вкладка 1</a>
                                            </li>
                                            <li><a href="#collapse-2">Вкладка 2</a>
                                            </li>
                                            <li><a href="#collapse-3">Вкладка 3</a>
                                            </li>
                                          </ul>
                                        </nav>
                                        
                                        <!-- Аккордион на второй странице index2.html -->
                                        <div id="accordion" class="panel-group">
                                          <div class="panel panel-default">
                                            <div class="panel-heading">
                                              <h2 class="panel-title"><a href="#collapse-1" data-parent="#accordion" data-toggle="collapse">Вкладка 1</a></h2>
                                            </div>
                                            <div id="collapse-1" class="panel-collapse collapse in">
                                              <div class="panel-body">
                                                <p>Текст 1</p>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="panel panel-default">
                                            <div class="panel-heading">
                                              <h2 class="panel-title"><a href="#collapse-2" data-parent="#accordion" data-toggle="collapse">Вкладка 2</a></h2>
                                            </div>
                                            <div id="collapse-2" class="panel-collapse collapse">
                                              <div class="panel-body">
                                                <p>Текст 2</p>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="panel panel-default">
                                            <div class="panel-heading">
                                              <h2 class="panel-title"><a href="#collapse-3" data-parent="#accordion" data-toggle="collapse">Вкладка 3</a></h2>
                                            </div>
                                            <div id="collapse-3" class="panel-collapse collapse">
                                              <div class="panel-body">
                                                <p>Текст 3</p>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        
                                        1. Александр Мальцев # 0
                                          Добавьте к ссылкам data-атрибуты:
                                          <nav class="navbar navbar-default">
                                            <ul class="nav navbar-nav navbar-right">
                                              <li><a href="#collapse-1" data-parent="#accordion" data-toggle="collapse">Вкладка 1</a></li>
                                              <li><a href="#collapse-2" data-parent="#accordion" data-toggle="collapse">Вкладка 2</a></li>
                                              <li><a href="#collapse-3" data-parent="#accordion" data-toggle="collapse">Вкладка 3</a></li>
                                            </ul>
                                          </nav>
                                          
                                        2. Alex # 0
                                          Александр, подскажите а возможно ли сделать такие блоки таким образом, что-бы кроме текста еще было и изображение?
                                          1. Александр Мальцев # 0
                                            А что Вам мешает, используйте. Для этого необходимо добавить элемент с тегом img.
                                          2. Роман # 0
                                            Добрый день!
                                            А можно ли так сделать чтобы при открытии аккордеон не сдвигал все вниз а открывался поверх контента который идет ниже по структуре?
                                            1. Александр Мальцев # 0
                                              Используйте для этого компонент popover.
                                              1. Роман # 0
                                                Но это немного не то. Аккордеон я использую как расширение приложения, то есть при определенных условиях форма приложения расширяется и в данном блоке появляется дополнительный функционал (кнопки и т.п.) Поповер я же не смогу настроить так чтобы он стал цельным продолжением основного div (и по форме и по оформлению)?!
                                                1. Александр Мальцев # 0
                                                  Понятно. Тогда необходимо использовать абсолютное позициониование.
                                                  Т.е. помещаем карусель в блок div и задаём ему относительное позиционирование и необходимую высоту. А карусели — абсолютное позиционирование.
                                                  <div style="position: relative; height: 150px;">
                                                    <div class="panel-group" id="accordion" style="position: absolute; top: 0; right: 0; left: 0;">
                                                      <!-- содержимое карусели -->
                                                    </div>
                                                  </div>
                                                  
                                            2. Алексей # 0
                                              Здравствуйте Александр.
                                              Извините, за возможно глупый вопрос. Не пойму, за счет чего реализована анимация раскрытия 'collapse блока'. Скрипт добавляет height:auto (в закрытом состоянии height:0px), но это свойство (как я понимаю) при помощи css не анимируется. Где магия?
                                              И еще один вопрос. Как сделать чтобы 'collapse- блок' закрывался по клику вне блока, по аналогии с dropdown-menu?
                                              Спасибо, вы уже очень много раз мне помогли…
                                              1. Александр Мальцев # 0
                                                Здравствуйте, Алексей. Анимация открытия и закрытия блока collapse осуществляется в Bootstrap с помощью CSS свойства transition.
                                                Для скрытия блока collapse (при клике вне его) необходимо добавить следующий сценарий JavaScript на страницу:
                                                // collapse - id collapse-блока 
                                                $(document).click(function(event) {
                                                  if ($(event.target).parents('#collapse').length==0) {
                                                    $('#collapse').collapse('hide');
                                                  };
                                                });
                                                
                                              2. Лорик # 0
                                                Добрый день, Александр!

                                                "… Следующий пример демонстрирует методы Bootstrap для сворачиваемых элементов. Нажмите на кнопки чтобы увидеть работу этих методов."

                                                над этим текстом есть кнопки, но нажатие на них не демонстрирует заявленного показа.
                                                Я что-то не то делаю или что-то поломалось?
                                                1. Александр Мальцев # 0
                                                  Здравствуйте, поправил.
                                                2. Леонид # 0
                                                  Здравствуйте Александр!
                                                  Подскажите пожалуйста, как сделать правильно следующее…
                                                  <div class="panel-group" id="accordion">
                                                    <!-- 1 панель -->
                                                    <div class="panel panel-default">
                                                      <!-- Заголовок 1 панели -->
                                                      <div class="panel-heading data-toggle="collapse" data-parent="#accordion"">
                                                        <h4 class="panel-title">
                                                  		Заголовок
                                                        </h4>
                                                       <span class="chevron">
                                                       	<i class="fa fa-chevron-down" aria-hidden="true"></i>
                                                      </span>
                                                      </div>
                                                      <div id="collapseOne" class="panel-collapse collapse in">
                                                        <!-- Содержимое 1 панели -->
                                                        <div class="panel-body">
                                                          <p>
                                                  		...
                                                  	</p>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                  
                                                  В этой конструкции надо чтоб при раскрытом блоке span class=«chevron» добавлялся класс chevron-up, пробовал на js сделать так
                                                  ...
                                                          $('#accordion .collapse').on('show.bs.collapse', function () {
                                                              if ($('#accordion').hasClass('panel-active')) {
                                                                  $('.panel-heading').find('.chevron').addClass('toggle');
                                                              }
                                                          })
                                                  ...
                                                  
                                                  Вроде работает но не правильно! Надо чтоб при развернутом блоке добавлялся класс, а при сворачивании удалялся. Не могу решить…
                                                  1. Александр Мальцев # 0
                                                    Можно реализовать так:
                                                    $(function() {
                                                      $('#accordion .collapse').on('show.bs.collapse', function() {
                                                        $(this).prev('.panel-heading').find('.chevron').addClass('chevron-up');
                                                      });
                                                      $('#accordion .collapse').on('hide.bs.collapse', function() {
                                                        $(this).prev('.panel-heading').find('.chevron').removeClass('chevron-up');
                                                      });
                                                    });
                                                    
                                                    Если же вы хотите изменять иконку, то следует выполнить следующим образом:
                                                    $(function() {
                                                      $('#accordion .collapse').on('show.bs.collapse', function() {
                                                        $(this).prev('.panel-heading').find('.chevron i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
                                                      });
                                                      $('#accordion .collapse').on('hide.bs.collapse', function() {
                                                        $(this).prev('.panel-heading').find('.chevron i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
                                                      });
                                                    });
                                                    
                                                    1. Леонид # 0
                                                      Спасибо Александр! Но не работает(
                                                      1. Александр Мальцев # 0
                                                        У вас ошибки в HTML коде, необходимо их исправить (должно быть так):
                                                          <div class="panel-heading" data-toggle="collapse" data-parent="#accordion">
                                                        
                                                        После этого должно заработать.
                                                        1. Леонид # 0
                                                          Изиняюсь Александр! Все работает чудесно! Дело в том, что кэш не сбросил…
                                                          Эту ошибку заметил еще когда первый пост делал.
                                                          <div class="panel-heading data-toggle="collapse" data-parent="#accordion"">
                                                          Спасибо вам огромное!
                                                  2. Леонид # 0
                                                    Здравствуйте Александр!
                                                    Спасибо большое за вашу помощь! Возникла еще одна проблема. Мобильное меню использует тот же плагин collapse. Как можно реализовать в мобильном меню добавление/удаление класса для (fa-chevron) как в предыдущем примере. И раскрытие вложенных меню более плавными. Помогите пожалуйста!
                                                    1. Александр Мальцев # 0
                                                      Здравствуйте.
                                                      Добавление значка к dropdown navbar (аналогично вышеприведённому коду):
                                                      <nav class="navbar navbar-default">
                                                      <!-- ... -->
                                                        <div class="collapse navbar-collapse" id="main-menu">
                                                          <ul class="nav navbar-nav">
                                                            <!-- ... -->
                                                            <li class="dropdown">
                                                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 
                                                                <span class="chevron">
                                                           	    <i class="fa fa-chevron-down" aria-hidden="true"></i>
                                                                </span>
                                                                <ul class="dropdown-menu">
                                                                  <!-- ... -->
                                                      
                                                      Управление отображением иконок вложенных меню (добавление и удаление классов):
                                                      $(function() {
                                                        $('#main-menu .dropdown').on('show.bs.dropdown', function() {
                                                          $(this).find('.chevron i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
                                                        });
                                                        $('#bs-example-navbar-collapse-1 .dropdown').on('hide.bs.dropdown', function() {
                                                          $(this).find('.chevron i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
                                                        });
                                                      });
                                                      
                                                    2. Вячеслав # 0
                                                      Добрый день! Подскажите, как сделать чтобы менялся текст кнопки при сворачивании и разворачивании. Например: «Показать содержимое» -> после того как развернулся блок, текст поменялся на «Скрыть содержимое». Заранее спасибо!
                                                      1. Александр Мальцев # 0
                                                        Здравствуйте. Необходимо использовать события show.bs.collapse и hide.bs.collapse:
                                                        <button id="controlContent" class="btn btn-danger" data-toggle="collapse" data-target="#toggleContent">Показать содержимое</button>
                                                        
                                                        <div id="toggleContent" class="collapse">
                                                          Контент...
                                                        </div>
                                                        
                                                        <script>
                                                        $(function(){
                                                          $('#toggleContent').on('show.bs.collapse', function(){
                                                            $('#controlContent').text('Скрыть содержимое');
                                                          });
                                                          $('#toggleContent').on('hide.bs.collapse', function(){
                                                            $('#controlContent').text('Показать содержимое');
                                                          });
                                                        });
                                                        </script>
                                                        
                                                        1. Вячеслав # 0
                                                          Спасибо большое!

                                                      Вы должны авторизоваться, чтобы оставлять комментарии.