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

Александр Мальцев
Александр Мальцев
84K
96
Содержание:
  1. Комментарии

Сегодня мы познакомимся с возможностями 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 - Аккордеон

Разворачивание и сворачивание панелей аккордеона через атрибуты 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>

Разворачивание и сворачивание панелей аккордеона с помощью 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>

Параметры

Есть определенные параметры, которые могут быть переданы методу 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 3 - Collapse

События

Сворачиваемый элемент 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>

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

Комментарии:

  1. Vitaliy
    Vitaliy
    19.03.2020, 04:27
    Доброго времени суток, интересует вопрос о сворачивании блока в спойлер или аккардеон на разрешении sm и ниже.
    Пока один вариант меня посетил. Сделать 2 блока и просто один из них скрывать с помощью css на разных разрешениях. Возможно есть иное решение вопроса?
    1. Александр Мальцев
      Александр Мальцев
      19.03.2020, 16:16
      Здравствуйте!
      Можно сделать так:
      <style>
      .spoiler_links {
        display: block;
      }
      .spoiler_body {
        display: none;
      }
      @media (min-width: 992px) {
        .spoiler_links {
          display: none;
        }
        .spoiler_body {
          display: block;
        }
      }
      </style>
      ...
      <a href="#" class="spoiler_links">Спойлер (кликните для открытия/закрытия)</a>
      <div class="spoiler_body alert alert-info">
        <p>...</p>
      </div>
      ...
      <script>
      $(function () {
        $('.spoiler_links').click(function (e) {
          e.preventDefault();
          $(this).next('.spoiler_body').toggle();
        });
      });
      </script>
      
      Готовый пример доступен по этой ссылке.
    2. Егор
      Егор
      21.01.2020, 21:01
      Здравствуйте. Посмотрел комментарии, не нашел такого. Как реализовать программно, не меняя айдишников вывод нескольких аккордеонов на одной странице?

      На WP добавляю блок аккордеон в редактор, так их может быть несколько на странице. С помощью JS? Например $this?
      1. Александр Мальцев
        Александр Мальцев
        23.01.2020, 15:26
        Здравствуйте.
        Как вариант можно просто поменять программно id и значение элементов a с href, на которые они ссылаются:
        <script>
        // получаем все элементы collapse
        $('.collapse').each(function(index){
          // получаем текущий id элемент
          var id = $(this).prop('id');
          // установим этому элементу id равный текущему id + индекс
          $(this).prop('id', id + index);
          // найдём элемент в родительском, который ссылается на id и добавим к его href индекс
          $(this).parent().find('[href="#' + id + '"]').attr('href', '#' + id + index);
        });
        </script>
        
        При этом стандартный механизм Bootstrap останется.

        Если нужно как-то по-другому, то тогда нет смысла использовать стандартный механизм Bootstrap, можно вместо него написать своё решение.
        1. Егор
          Егор
          23.01.2020, 15:37
          Спасибо. Это и нужно.
          На wordpress делал повторитель в админке, только для одного аккордеона примерно так на PHP: 
          $acoord_id = 0; 
          
          Ну а в цикле:
          $acoord_id++;
          #collapse_<?php echo $acoord_id; ?>
      2. Anush
        Anush
        12.05.2017, 10:33
        Здравствуйте. Помогите, пожалуйста, настроить аккордеон так, чтобы при переходе ну другие страницы, активным стал тот блок, откуда пришли. В комментарии есть пример, но он у меня не работал.
        Меню у меня как в «картинке 1»


        нужно чтобы при переходе на страницу «КОЗЫРЬКИ И НАВЕСЫ» меню выглядела как в «картинке 2».


        Спасибо)
        1. Александр Мальцев
          Александр Мальцев
          12.05.2017, 11:30
          Здравствуйте. Сложно предугадать, что у вас не работает, желательно данное меню привести в «живом» виде (например, на jsfiddle).
          Заготовку можно взять по адресу: jsfiddle.net/itchief/ktb3tep4/
          1. Anush
            Anush
            18.05.2017, 10:43
            Доброе утро. У меня не получается (( Помогите, пожалуйста
            jsfiddle.net/ktb3tep4/4/
            1. Александр Мальцев
              Александр Мальцев
              20.05.2017, 04:11
              Доброе! Когда вы формируете разметку панелей, для указания переключаемого элемента используйте атрибут data-target, а атрибут href используйте для указания ссылки. Иначе будет невозможно опознать, к какому разделу относится эта ссылка.
              ...
              <!-- Заголовок 1 панели -->
              <div class="panel-heading">
                <div class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" href="...">Кованые мангалы <span class="glyphicon glyphicon-chevron-down"></span></a>
                </div>
              </div>
              ...
              
              Скрипт, который необходимо будет добавить ко всем страницам (на которых присутствует аккордеон):
              $(function(){
                // определяем путь текущей страницы
                var url = location.pathname.slice(1);
                // если элемент с таким путём есть в аакордионе
                if ($('#accordion a[href*="'+url+'"]').length>0) {
                  // то программно для него вызываем событие click
                  $('#accordion a[href*="'+url+'"]').closest('.panel').find('.panel-title a').trigger('click');
                }  
              });
              
        2. Виталий
          Виталий
          03.05.2017, 15:19
          Александр, добрый день!
          Второй день бьюсь над простейшем казалось бы заданием, необходимо изменять иконку при открытии/закрытии accordion.
          Пользовался вашим руководством выше в комментариях, не выходит, в коде два accordion и две иконки, при нажатии на одну, меняются обе.

          <div class="col-md-3" id="left_col">
          			<div id="filter" class="filter" data-toggle="collapse" data-target="#widgets_div" aria-expanded="true">Фильтр<i class="cursor pull-right pe-2x i-angle-up-z"></i></div>
          			<div id="widgets_div" class="widgets_div collapse in" aria-expanded="true"><div class="property"><h4>Строка 1<i id="collapse_s" class="cursor pe-2x pull-right i-angle-down-z collapsed" data-toggle="collapse" data-target="#slider_s" aria-expanded="false"></i></h4><div id="slider_s" class="collapse" data-toggle="false" aria-expanded="false" style="height: 0px;">
          
          $(function() {
          	$('#left_col').on('show.bs.collapse', function() {
          		$('#filter').find('i').addClass('i-angle-up-z').removeClass('i-angle-down-z');
          	});
          	$('#left_col').on('hide.bs.collapse', function() {
          		$('#filter').find('i').addClass('i-angle-down-z').removeClass('i-angle-up-z');
          	});
          	$('#left_col').on('show.bs.collapse', function() {
          		$('#widgets_div').find('i').addClass('i-angle-up-z').removeClass('i-angle-down-z');
          	});
          	$('#left_col').on('hide.bs.collapse', function() {
          		$('#widgets_div').find('i').addClass('i-angle-down-z').removeClass('i-angle-up-z');
          	});
          });
          
          1. Александр Мальцев
            Александр Мальцев
            03.05.2017, 15:52
            В этом случае вам необходимо указать 2 разных селектора, а не один #left_col. Или написать какое-то универсальное решение без привязки к конкретным идентификаторам.
          2. Олег
            Олег
            19.03.2017, 01:23
            Александр здравствуйте!
            Пытаюсь решить проблему с меню на одностраничном сайте, дело в том, что хотелось бы, чтобы при нажатии на пункты меню в мобильной версии оно сворачилось — переход по ссылкам в меню с эффектом прокрутки до нужного ID.
            Моё меню
            <div class="container-fluid">
            	<!-- Brand and toggle get grouped for better mobile display -->
            	<div class="navbar-header">
            		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            			<span class="sr-only">Toggle navigation</span>
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
            		</button>
            	</div>
            	<!-- Collect the nav links, forms, and other content for toggling -->
            	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            		<ul class="nav navbar-nav navbar-right">
            		<li><a href="/">Главная</a></li>
            			<li><a href="#" class="animated delay3 about-more">1</a></li>
            			<li><a href="#" class="animated delay3 about-more">2</a></li>
            			<li><a href="#" class="animated delay3 about-more">3</a></li>
            			<li><a href="#" class="animated delay3 about-more">4</a></li>
            		</ul>
            	</div><!-- /.navbar-collapse -->
            </div>
            Уже много всего перелопатил но никак не могу получить результат. Пытался играть с dropdown-menu, но вкупе с классами анимации прокрутки все перестает работать. Я уже обрадовался, кода нашел у вас способ с помощью скрипта

            <script type="text/javascript">
            $(document).ready(function(){
                $("a").click(function(){
                    $("#toggleSample2").collapse('toggle');
                });
            });
            </script>
            Но при таком варианте сворачивание и разворачивание происходит при нажатии на любой ссылке на сайте, а нужно, только при нажатии в выпадающем меню в мобилной версии.
            Подскажите в этой проблеме, если можете.
            1. Александр Мальцев
              Александр Мальцев
              21.03.2017, 11:55
              Добавьте не для всех ссылок, а только для тех, которые расположены в меню. Но и проверить ширину экрана необходимо:
              $(document).ready(function(){
                  $(".navbar-collapse a").click(function() {
                      if (window.matchMedia('screen and (max-width: 767px)').matches) {
                        $("#toggleSample2").collapse('toggle');
                      }
                  });
              });
              
              1. Олег
                Олег
                21.03.2017, 19:38
                Александр спасибо за помощь, теперь работает ка надо. Очень благодарен!!!
            2. Tracktor
              Tracktor
              01.03.2017, 18:42
              Все комменты не изучил, извините, если повторяюсь, направьте пожалуйста, к нужному.
              Вопрос такой — можно ли сделать, чтобы положения аккордеона запоминались? Например, у меня на странице закрытый блок

              <!-- HTML код управляемого элемента -->
              <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleSample" value="Элемент управления">
              <!-- HTML код сворачиваемого элемента -->
              <div id="toggleSample" class="collapse">
                <p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; padding: 8px;">
              На этом примере показана возможность сворачивания и разворачивания элемента с помощью data атрибутов. Нажмите на <b>кнопку</b>, чтобы увидеть этот эффект.
                </p>
              </div>
              Пользователь зашёл на страницу, раскрыл его. Но когда обновил старицу — он остался раскрытым? И наоборот, если есть раскрытый, пользователь его закрыл, обновил страницу (или полазил по другим и вернулся на эту), а аккордеон остался в том же положении, в котором его оставил пользователь. Предполагаю, что это как-то можно сделать с помощью php или js с использованием куки, но как именно — не знаю…
              1. Александр Мальцев
                Александр Мальцев
                02.03.2017, 15:54
                В данном случае лучше использовать не COOKIE, а LocalStorage.
                $(function(){
                  idCollapse = 'toggleSample';
                  // при открытии добавляем в хранилище ключ toggleSample
                  $('#'+idCollapse).on('shown.bs.collapse', function () {
                    localStorage.setItem(idCollapse, 'in');
                    console.log('dd');
                  });
                  // при скрытии удаляем из хранилища ключ toggleSample
                  $('#'+idCollapse).on('hidden.bs.collapse', function () {
                    localStorage.removeItem(idCollapse);
                  });
                  // проверяем если ли значение в LocalStorage, и в зависимости от него открываем или скрываем содержимое
                  if (localStorage.getItem(idCollapse) != null) {
                    $('#'+idCollapse).addClass('in');
                  } else {
                    $('#'+idCollapse).removeClass('in');  
                  }
                });
                
                1. Дмитрий
                  Дмитрий
                  22.01.2018, 17:36
                  У меня в коде используется несколько id: collapse1, collapse2, collapse3. Хотел сделать, чтобы посетитель при возвращении на страницу с аккордеоном видел открытой ту панель, которую ранее открыл. Я скопировал этот код три раза и подставил свои id, но у меня получилось, что открывается только нижняя панель. Подскажите пожалуйста возможно ли поправить код, чтобы по возвращение на страницу открывалась та панель, которая была открыта.

                  $(function() {

                  idCollapse = 'collapse1';
                  $('#'+idCollapse).on('shown.bs.collapse', function () {
                  localStorage.setItem(idCollapse, 'in');
                  console.log('dd');
                  });
                  $('#'+idCollapse).on('hidden.bs.collapse', function () {
                  localStorage.removeItem(idCollapse);
                  });
                  if (localStorage.getItem(idCollapse) != null) {
                  $('#'+idCollapse).addClass('in');
                  } else {
                  $('#'+idCollapse).removeClass('in');
                  }

                  idCollapse = 'collapse2';
                  $('#'+idCollapse).on('shown.bs.collapse', function () {
                  localStorage.setItem(idCollapse, 'in');
                  console.log('dd');
                  });
                  $('#'+idCollapse).on('hidden.bs.collapse', function () {
                  localStorage.removeItem(idCollapse);
                  });
                  if (localStorage.getItem(idCollapse) != null) {
                  $('#'+idCollapse).addClass('in');
                  } else {
                  $('#'+idCollapse).removeClass('in');
                  }

                  idCollapse = 'collapse3';
                  $('#'+idCollapse).on('shown.bs.collapse', function () {
                  localStorage.setItem(idCollapse, 'in');
                  console.log('dd');
                  });
                  $('#'+idCollapse).on('hidden.bs.collapse', function () {
                  localStorage.removeItem(idCollapse);
                  });
                  if (localStorage.getItem(idCollapse) != null) {
                  $('#'+idCollapse).addClass('in');
                  } else {
                  $('#'+idCollapse).removeClass('in');
                  }
                  });
                  1. Tracktor
                    Tracktor
                    03.03.2017, 11:29
                    Отлично работает, спасибо! Про LocalStorage даже не знал.
                2. Вячеслав
                  Вячеслав
                  22.02.2017, 12:38
                  Здравствуйте. Может поможете и мне.
                  У меня акардеон типа:
                  <ul id="accordion1">
                      <li>
                         <a href="#parent_1" data-toggle="collapse" data-parent="#accordion1">Категория1</a>
                      </li>    
                      <ul class="collapse" id="parent_1">
                          <li><a href="#">Подкатегория1</a></li>    
                          <li><a href="#">Подкатегория2</a></li>    
                      </ul>
                      <li>
                        <a href="#parent_2" data-toggle="collapse" data-parent="#accordion1">Категория2</a>
                      </li>    
                      <ul class="collapse" id="parent_2">
                          <li>
                              <a href="#">Подкатегория3</a>
                          </li>    
                      </ul>
                  </ul>
                  
                  Куда тут можно вставить data-parent, чтобы при открытии второго элемента первый закрылся?
                  1. Александр Мальцев
                    Александр Мальцев
                    23.02.2017, 15:58
                    В данном примере это сделать не получится, т.к. его работа связана с классом panel.
                    В этом случае можно использовать следующий скрипт:
                    $(function(){
                      $('#accordion1 .collapse').on('show.bs.collapse', function () {
                        $('#accordion1 .collapse').not(this).removeClass('in');
                      });
                    });
                    
                    1. Larisa
                      Larisa
                      21.03.2017, 21:04
                      здравствуйте! у меня аналогичная проблема — надо сделать аккордеон без класса panel, применяю ваш js — не работает :(
                      <section class="catalog-wrap solutions" id="accordion1">
                          <div class="container">
                      <div class="category-single">
                              <div class="category-title">
                                <a class="category-name collapsed" href="#category2" data-toggle="collapse" data-parent="#accordion1"  aria-expanded="false" aria-controls="category2"><span class="caret-control"></span>Кабинеты</a>
                              </div><!-- //.category-title -->
                              <div class="separator"></div>
                              <div class="sub-category sub-first-level collapse" id="category2">
                                <div class="sub-category-single">
                                  <div class="category-title">
                                    <a class="category-name" href="#">Общие данные</a>
                                    <div class="category-action pull-right">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator"></div>
                      
                                  <div class="category-title">
                                    <a class="category-name " href="#">Система микрофонов</a>
                                    <div class="category-action pull-right">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator"></div>
                      
                                  <div class="category-title">
                                    <a class="category-name" href="#">Система отображения видео</a>
                                    <div class="category-action pull-right">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator"></div>
                      
                                  <div class="category-title" id="subcategoryTitle1">
                                    <a class="category-name" href="#">Система обработки видео</a>
                                    <div class="category-action pull-right" id="subAction1">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator" id="subseparator1"></div>
                                </div>
                              </div><!-- //.sub-first-level -->
                            </div><!-- //.category-single -->
                      <div class="category-single">
                              <div class="category-title" id="categoryTitle1">
                                <a class="category-name collapsed" href="#category1" data-toggle="collapse" data-parent="#accordion1" aria-expanded="false" aria-controls="category1"><span class="caret-control"></span>Переговорные</a>
                              </div><!-- //.category-title -->
                              <div class="separator" id="separator1"></div>
                              <div class="sub-category sub-first-level collapse" id="category1">
                                <div class="sub-category-single">
                                  <div class="category-title">
                                    <a class="category-name" href="#">Общие данные</a>
                                    <div class="category-action pull-right">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator"></div>
                      
                                  <div class="category-title">
                                    <a class="category-name " href="#">Система микрофонов</a>
                                    <div class="category-action pull-right">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator"></div>
                      
                                  <div class="category-title">
                                    <a class="category-name" href="#">Система отображения видео</a>
                                    <div class="category-action pull-right">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator"></div>
                      
                                  <div class="category-title" id="subcategoryTitle1">
                                    <a class="category-name" href="#">Система обработки видео</a>
                                    <div class="category-action pull-right" id="subAction1">
                                      <a href="#">Редактировать</a>
                                      <a href="#">Удалить</a>
                                    </div>
                                  </div><!-- //.category-title -->
                                  <div class="separator" id="subseparator1"></div>
                                </div>
                              </div><!-- //.sub-first-level -->
                            </div><!-- //.category-single -->
                      </div><!-- //.container -->
                      </section>
                      
                      1. Александр Мальцев
                        Александр Мальцев
                        25.03.2017, 02:26
                        Нет должно всё работать: jsfiddle.net/itchief/3te1g8vt/
                        Если не так, то обновите версию Bootstrap 3 на последнюю 3.3.7.
                        Если это не возможно, то попробуйте так:
                        $(function(){
                          $('#accordion1 .collapse').on('show.bs.collapse', function () {
                            $('#accordion1 .sub-first-level').not(this).removeClass('in');
                          });
                        });
                        
                  2. Dmitry
                    Dmitry
                    01.02.2017, 20:51
                    Добрый вечер, Александр.
                    Возник вопрос касательно аккордеона и высоты блоков после его сворачивания, как сделать так, чтобы высота страницы возвращалась на начальную позицию. Проблема на скрине. Заранее спасибо.
                    1. Александр Мальцев
                      Александр Мальцев
                      04.02.2017, 15:36
                      Здравствуйте. Проверьте стили, т.к. высота по умолчанию и так должна возвращаться в первоначальное состояние.
                    2. Алексей
                      Алексей
                      01.02.2017, 10:26
                      Добрый день!
                      Пытаюсь сохранить состояние открытой панели аккордиона через cookie. Но никак не могу добиться чтобы нужная панель разворачивалась при перезагрузке страницы:
                      <script type="text/javascript">
                      			//$("#accordion").accordion();					// Оформление страницы типа "аккордион"
                      			$(function()	{ $("#accordion").accordion(
                      						{ autoHeigth: false,
                      						  //active: GetCookie("accordion"),
                      						  activate: function(click){save();}
                      						});
                      					});
                      			var tab_index = $("#tabs").tabs("option", "selected") + 1;	// Переменная  для tabs
                      
                      			// Отображение данных при загрузке страницы
                      			$(document).ready(function()
                      			{	push();
                      			});
                      
                      
                      			function save()
                      			{ var active = $("#accordion").accordion( "option", "active" );
                      			  SetCookie("accordion", active);
                      			  alert("Save = " +active);
                      			}
                      			
                      			function push()
                      			{ var active = GetCookie("accordion");
                      			  if(active == '') active = 0;
                      			  alert("accordion = " +active);
                      			  $("#accordion").accordion( "option", "active", active);
                      			}
                      			
                      		</script>
                      Если в push(); переменной active присваиваю 2, то при активации функции все работает, а если var active = GetCookie(«accordion»); то не работает! В чем проблема-то?

                      UPD: написав пост, сам себе ответил! При var active = parseInt( GetCookie(«accordion») ); все заработало.
                      А как можно сделать все лаконичнее???
                      1. Александр Мальцев
                        Александр Мальцев
                        04.02.2017, 15:25
                        Здравствуйте. Вы используете не Bootstrap аккордеон, а jQuery UI.
                        Оптимизировать код можно как-то так:
                        $(function(){
                          var accrd = $("#accordion");
                          accrd.accordion({
                            autoHeigth: false,
                            activate: function(click){save();}
                          });
                          function save(){
                            var active = accrd.accordion("option","active");
                            SetCookie("accordion", active);
                          }
                          function push(){ 
                            var active = parseInt(GetCookie("accordion")) || 0;
                            accrd.accordion("option","active",active);
                          }  
                          push();
                        });
                        
                      2. controllix
                        controllix
                        08.01.2017, 14:50
                        Здравствуйте! Подскажите, пожалуйста, как сделать, чтобы содержимое в раскрывающемся блоке было подгружаемым? Т.е. контента не было заранее на странице до нажатия на кнопку раскрытия.
                        1. Александр Мальцев
                          Александр Мальцев
                          09.01.2017, 15:24
                          Добрый день. Для этого можно воспользоваться функцией jQuery load.
                          Например, можно реализовать так.
                          1. Создать необходимые файлы с содержимым на сервере. Например, content1.txt, content2.txt и content3.txt.
                          2. На необходимую страницу (например, accordeon.html) вставить HTML-код аккордеона
                          <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                              <div class="panel-heading">
                                <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#accordion" href="#content1">Контент 1</a>
                                </h4>
                              </div>
                              <div id="content1" class="panel-collapse collapse">
                                <div class="panel-body">
                                </div>
                              </div>
                            </div>
                            <div class="panel panel-default">
                              <div class="panel-heading">
                                <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#accordion" href="#content2">Контент 2</a>
                                </h4>
                              </div>
                              <div id="content2" class="panel-collapse collapse">
                                <div class="panel-body">
                                </div>
                              </div>
                            </div>
                            <div class="panel panel-default">
                              <div class="panel-heading">
                                <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#accordion" href="#content3">Контент 3</a>
                                </h4>
                              </div>
                              <div id="content3" class="panel-collapse collapse">
                                <div class="panel-body">
                                </div>
                              </div>
                            </div>
                          </div>
                          
                          3. В эту же страницу (accordeon.html) добавить сценарий JavaScript, который и будеть выполнять всю эту «магию»:
                          <script>
                          $(function(){
                            $('#accordion .collapse').on('show.bs.collapse', function () {
                              $(this).find('.panel-body').load(this.id+'.txt');
                            });
                          });
                          </script>
                          
                          Файл accordeon.html и файлы с содержимым (content1.txt, content2.txt и content3.txt) должны находиться в одном каталоге.
                          Проверять работоспособность примера необходимо на сервере.
                        2. chendlermon
                          chendlermon
                          23.12.2016, 03:42
                          Здравствуйте. Скажите пожалуйста, почему у меня не открывается содержимое панелей? я вставил даже код из вашего примера, но результат тот же.
                          п.с. в адресной строке браузера видно как происходит переход (#collapse1,#collapse2,#collapse3), но панели не раскрываются.
                          1. Александр Мальцев
                            Александр Мальцев
                            24.12.2016, 00:57
                            Добрый день. Скорее всего, вы не подключили плагин Bootstrap (bootstrap.js), либо его подключили до подключения библиотеки jQuery. Или расположили свой код до подключения плагина Bootstrap. Проверьте эти моменты.
                            1. chendlermon
                              chendlermon
                              24.12.2016, 18:51
                              Да, он был до jquery. спасибо большое!
                              На локальном теперь все работает, но на вордпрессе, вообще панелей нет (только открытый текст — заголовок, содержимое). Установил плагин Bootstrap 3 Shortcodes, потом Accordion Shortcodes — ситуация не меняется.
                              1. Александр Мальцев
                                Александр Мальцев
                                26.12.2016, 09:07
                                На WordPress попробуйте подключить Bootstrap посредством написания своей функции с использованием wp_enqueue_script() и wp_enqueue_style().
                          2. Вячеслав
                            Вячеслав
                            25.11.2016, 10:22
                            Добрый день! Подскажите, как сделать чтобы менялся текст кнопки при сворачивании и разворачивании. Например: «Показать содержимое» -> после того как развернулся блок, текст поменялся на «Скрыть содержимое». Заранее спасибо!
                            1. Александр Мальцев
                              Александр Мальцев
                              25.11.2016, 13:40
                              Здравствуйте. Необходимо использовать события 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. Вячеслав
                                Вячеслав
                                25.11.2016, 14:19
                                Спасибо большое!
                            2. Леонид
                              Леонид
                              11.11.2016, 10:53
                              Здравствуйте Александр!
                              Спасибо большое за вашу помощь! Возникла еще одна проблема. Мобильное меню использует тот же плагин collapse. Как можно реализовать в мобильном меню добавление/удаление класса для (fa-chevron) как в предыдущем примере. И раскрытие вложенных меню более плавными. Помогите пожалуйста!
                              1. Александр Мальцев
                                Александр Мальцев
                                11.11.2016, 13:50
                                Здравствуйте.
                                Добавление значка к 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. Леонид
                                Леонид
                                29.10.2016, 18:28
                                Здравствуйте Александр!
                                Подскажите пожалуйста, как сделать правильно следующее…
                                <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. Александр Мальцев
                                  Александр Мальцев
                                  30.10.2016, 12:48
                                  Можно реализовать так:
                                  $(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. Леонид
                                    Леонид
                                    30.10.2016, 14:52
                                    Спасибо Александр! Но не работает(
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      31.10.2016, 09:49
                                      У вас ошибки в HTML коде, необходимо их исправить (должно быть так):
                                        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion">
                                      
                                      После этого должно заработать.
                                      1. Леонид
                                        Леонид
                                        01.11.2016, 02:44
                                        Изиняюсь Александр! Все работает чудесно! Дело в том, что кэш не сбросил…
                                        Эту ошибку заметил еще когда первый пост делал.
                                        <div class="panel-heading data-toggle="collapse" data-parent="#accordion"">
                                        Спасибо вам огромное!
                                2. Лорик
                                  Лорик
                                  18.10.2016, 11:29
                                  Добрый день, Александр!

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

                                  над этим текстом есть кнопки, но нажатие на них не демонстрирует заявленного показа.
                                  Я что-то не то делаю или что-то поломалось?
                                  1. Александр Мальцев
                                    Александр Мальцев
                                    18.10.2016, 11:37
                                    Здравствуйте, поправил.
                                  2. Алексей
                                    Алексей
                                    13.10.2016, 21:08
                                    Здравствуйте Александр.
                                    Извините, за возможно глупый вопрос. Не пойму, за счет чего реализована анимация раскрытия 'collapse блока'. Скрипт добавляет height:auto (в закрытом состоянии height:0px), но это свойство (как я понимаю) при помощи css не анимируется. Где магия?
                                    И еще один вопрос. Как сделать чтобы 'collapse- блок' закрывался по клику вне блока, по аналогии с dropdown-menu?
                                    Спасибо, вы уже очень много раз мне помогли…
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      14.10.2016, 10:20
                                      Здравствуйте, Алексей. Анимация открытия и закрытия блока collapse осуществляется в Bootstrap с помощью CSS свойства transition.
                                      Для скрытия блока collapse (при клике вне его) необходимо добавить следующий сценарий JavaScript на страницу:
                                      // collapse - id collapse-блока 
                                      $(document).click(function(event) {
                                        if ($(event.target).parents('#collapse').length==0) {
                                          $('#collapse').collapse('hide');
                                        };
                                      });
                                      
                                    2. Роман
                                      Роман
                                      30.09.2016, 10:17
                                      Добрый день!
                                      А можно ли так сделать чтобы при открытии аккордеон не сдвигал все вниз а открывался поверх контента который идет ниже по структуре?
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        02.10.2016, 04:37
                                        Используйте для этого компонент popover.
                                        1. Роман
                                          Роман
                                          03.10.2016, 06:43
                                          Но это немного не то. Аккордеон я использую как расширение приложения, то есть при определенных условиях форма приложения расширяется и в данном блоке появляется дополнительный функционал (кнопки и т.п.) Поповер я же не смогу настроить так чтобы он стал цельным продолжением основного div (и по форме и по оформлению)?!
                                          1. Александр Мальцев
                                            Александр Мальцев
                                            05.10.2016, 12:45
                                            Понятно. Тогда необходимо использовать абсолютное позициониование.
                                            Т.е. помещаем карусель в блок 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. Alex
                                        Alex
                                        22.08.2016, 18:58
                                        Александр, подскажите а возможно ли сделать такие блоки таким образом, что-бы кроме текста еще было и изображение?
                                        1. Александр Мальцев
                                          Александр Мальцев
                                          24.08.2016, 11:21
                                          А что Вам мешает, используйте. Для этого необходимо добавить элемент с тегом img.
                                        2. Olga
                                          Olga
                                          01.08.2016, 10:26
                                          Подскажите пожалуйста, как сделать ссылку на содержимое вкладки аккордеона?
                                          Аккордеон и пункты меню будут на одной странице.
                                          Нужно сделать так, чтобы когда кликали на «Вкладка 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. Александр Мальцев
                                            Александр Мальцев
                                            05.08.2016, 12:05
                                            Добавьте к ссылкам 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. alan
                                            alan
                                            04.07.2016, 08:51
                                            Добрый день, Александр, подскажите, пожалуйста, есть ли способ реализации ниже приведенной задачи:

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

                                            Проблема: при нажатии на любой существующий платеж, открывается первый и только первый элемент из всего списка…
                                            если, я правильно понимаю, то, у каждого элемента для открытия должен быть уникальный 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. Александр Мальцев
                                              Александр Мальцев
                                              04.07.2016, 12:58
                                              Добрый. Вам необходимо написать цикл, который будет переберать все платежи в системе и информацию о них. Идентификатор, который у Вас содержится в data-target должен соответствовать id блоку, который необходимо отображать при нажатию на эту ссылку. Т.е. каждая ссылка должна содержать уникальный идентификатор того элемента, который она должна открыть.
                                              1. alan
                                                alan
                                                04.07.2016, 14:53
                                                Да, спасибо, не правильно указывал именно id
                                            2. Дмитрий
                                              Дмитрий
                                              21.04.2016, 17:23
                                              Александр, здравствуйте! Отложил я в свое время погружение в 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. Александр Мальцев
                                                Александр Мальцев
                                                22.04.2016, 16:11
                                                Данную задачу можно решить через замыкания 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. Дмитрий
                                                  Дмитрий
                                                  22.04.2016, 16:19
                                                  Александр, спасибо огромное! Буду разбирать ваш код для понимания процесса. У вас отличный ресурс — есть что почитать, и советом вот помогли) Спасибо еще раз!
                                              2. Максим
                                                Максим
                                                07.04.2016, 10:11
                                                Доброго времени суток!
                                                Есть 5 ссылок на странице1. Есть аккордеон на странице2. Как сделать чтобы при переходе на страницу2 с аккордеоном открывался блок с той ссылкой по которой мы кликнули на странице1? Типа ссылка3 открывает содержимое блока3.
                                                1. Александр Мальцев
                                                  Александр Мальцев
                                                  07.04.2016, 15:38
                                                  Добавить на 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. Сергей
                                                    Сергей
                                                    03.10.2016, 10:21
                                                    Здравствуйте, Александр!
                                                    При переходе по ссылке с хэш открывается нужная вкладка.
                                                    Но далее если на странице есть меню с другими вкладками, то они не работают.
                                                    Скрипт читает url в котором #collapseOne и всегда показывает этот слой.
                                                    Видимо надо сделать как то по другому.
                                                    Если хэша нет, то как бы и скрипта нет. Т.к. нужный открытый слой можно выбрать и самому параметром in.
                                                    Если есть хэш, то открыть нужный слой и как бы убрать скрипт из работы.
                                                    Что бы он срабатывал 1 раз при загрузке страницы и больше не мешал отрабатывать бутстрапу.
                                                    1. Александр Мальцев
                                                      Александр Мальцев
                                                      05.10.2016, 14:45
                                                      Здравствуйте. Попробуйте следующий скрипт:
                                                      $(function(){
                                                        var hash = window.location.hash;
                                                        // accordion - id аккордеона, в котором необходимо управлять панелями с помощью хэша
                                                        $("#accordion .panel-collapse").removeClass('in');
                                                        if (hash) {
                                                          $("#accordion "+hash).addClass("in");
                                                        }  
                                                      });
                                                      
                                                      1. Сергей
                                                        Сергей
                                                        05.10.2016, 14:59
                                                        Александр, большое спасибо, что откликнулись. У вас отличный сайт и вы отлично его развиваете.
                                                        В общем я подошел по другому к решению этого вопроса. Я решил не вмешиваться в работу 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. Максим
                                                      Максим
                                                      07.04.2016, 23:37
                                                      Большое спасибо, Александр!
                                                  2. Андрей
                                                    Андрей
                                                    18.03.2016, 13:12
                                                    Доброго времени суток, Александр.

                                                    Можно ли сделать активным все поле как ссылку для открытия Аккордеона, не наводя на саму ссылку как в примере 1 на этой странице… ( Заголовок 1 панели )?
                                                    1. Александр Мальцев
                                                      Александр Мальцев
                                                      19.03.2016, 10:11
                                                      Посмотрите ответ в этом комментарии.
                                                    2. kasadas
                                                      kasadas
                                                      10.02.2016, 07:43
                                                      А почему мой вопрос удалили?
                                                      1. Александр Мальцев
                                                        Александр Мальцев
                                                        10.02.2016, 12:54
                                                        Никто вопрос не удалял, просто Вы его оставили не в этом месте, а вот здесь
                                                        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. Денис
                                                        Денис
                                                        25.01.2016, 23:45
                                                        Добрый день,
                                                        у меня есть два блока, при нажатии на один второй должен быть скрытым, и наоборот при нажатии 2ого первый скрываться.

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

                                                        1. Александр Мальцев
                                                          Александр Мальцев
                                                          26.01.2016, 13:13
                                                          Здравствуйте.
                                                          Для этого необходимо написать код на 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. Кирилл
                                                          Кирилл
                                                          17.01.2016, 13:22
                                                          Добрый день. Огромное спасибо за уроки все очень доходчиво и понятно.
                                                          У меня возник вопрос: как сделать так что бы данные списки в меню при загрузке страницы были закрыты (сейчас при загрузке страницы — 1ый список всегда открыт, после переходов уже все поочередно открывается и закрывается)
                                                          1. Кирилл
                                                            Кирилл
                                                            17.01.2016, 13:25
                                                            хотя уже все, разобрался надо просто убрать лишний класс
                                                            class="panel-collapse collapse in">
                                                            «IN»
                                                          2. Дмитрий
                                                            Дмитрий
                                                            26.12.2015, 11:03
                                                            Спасибо за помощь. Развития вам в Новом году.
                                                            1. Александр Мальцев
                                                              Александр Мальцев
                                                              28.12.2015, 15:28
                                                              Спасибо, Дмитрий.
                                                            2. Дмитрий
                                                              Дмитрий
                                                              25.12.2015, 18:02
                                                              Доброго дня, Александр!
                                                              подскажите как сделать чтобы активное (раскрытое) поле panel-heading подсвечивалось заданным цветом?
                                                              1. Александр Мальцев
                                                                Александр Мальцев
                                                                26.12.2015, 08:36
                                                                Или лучше это сделать с помощью классов.
                                                                В этом случае скрипт будет такой:
                                                                $(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. Егор
                                                                  Егор
                                                                  06.04.2016, 13:26
                                                                  Спасибо. Все время нет изучить JS и jQuery, пытался самостоятельно добавить класс к раскрытой панели, не получилось. Ну и у вас, естественно нашел, что искал.
                                                                2. Александр Мальцев
                                                                  Александр Мальцев
                                                                  26.12.2015, 08:31
                                                                  Здравствуйте, Дмитрий!
                                                                  Это можно выполнить с помощью скрипта:
                                                                  // после загрузки страницы
                                                                  $(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");
                                                                    })
                                                                  });
                                                                  
                                                                3. Виталий
                                                                  Виталий
                                                                  19.12.2015, 22:47
                                                                  Подскажите пожалуйста как эту штуку использовать в modx revo.
                                                                  1. Александр Мальцев
                                                                    Александр Мальцев
                                                                    23.12.2015, 04:11
                                                                    Если Вам нужно статический вывод то используйте её в шаблоне или чанке.
                                                                    Если Вы хотите её формировать, то выберите для этого подходящий сниппет…
                                                                  2. Павел
                                                                    Павел
                                                                    04.11.2015, 12:50
                                                                    Привет
                                                                    скажи а можно ли сделать чтобы свертывание и развертывание
                                                                    происходило по нажатии по панели, сейчас по тексту в панели.
                                                                    1. Александр Мальцев
                                                                      Александр Мальцев
                                                                      04.11.2015, 14:04
                                                                      Привет, можно.

                                                                      Для этого необходимо все 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>
                                                                      
                                                                      1. Tracktor
                                                                        Tracktor
                                                                        10.02.2017, 12:00
                                                                        Я так сделал, и теперь не срабатывает «аккордионность», то есть при открытии следующего блока предыдущий не закрывается… Что может быть не так?
                                                                        1. Александр Мальцев
                                                                          Александр Мальцев
                                                                          10.02.2017, 15:57
                                                                          Используйте атрибут data-parent, в качестве значения которого указывайте id родителя.
                                                                          Например, как-то так:
                                                                          <div class="panel-group" id="accordion">
                                                                          
                                                                          <!-- 1 панель -->
                                                                          <div class="panel panel-default">
                                                                            <!-- Заголовок 1 панели -->
                                                                            <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion">
                                                                              <h4 class="panel-title">
                                                                                Заголовок панели 1
                                                                              </h4>
                                                                            </div>
                                                                            <div id="collapseOne" class="panel-collapse collapse in">
                                                                              <!-- Содержимое 1 панели -->
                                                                              <div class="panel-body">
                                                                                Текст панели 1...
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                          <!-- 2 панель -->
                                                                          <div class="panel panel-default">
                                                                            <!-- Заголовок 1 панели -->
                                                                            <div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion">
                                                                              <h4 class="panel-title">
                                                                                Заголовок панели 2
                                                                              </h4>
                                                                            </div>
                                                                            <div id="collapseTwo" class="panel-collapse collapse">
                                                                              <!-- Содержимое 2 панели -->
                                                                              <div class="panel-body">
                                                                                Текст панели 2...
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                          <!-- 3 панель -->
                                                                          <div class="panel panel-default">
                                                                            <!-- Заголовок 3 панели -->
                                                                            <div class="panel-heading" data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion">
                                                                              <h4 class="panel-title">
                                                                                Заголовок панели 3
                                                                              </h4>
                                                                            </div>
                                                                            <div id="collapseThree" class="panel-collapse collapse">
                                                                              <!-- Содержимое 3 панели -->
                                                                              <div class="panel-body">
                                                                                Текст панели 3...
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                          
                                                                          </div>
                                                                          
                                                                    2. Артем
                                                                      Артем
                                                                      27.08.2015, 14:33
                                                                      При клике на кнопку «Collapse с параметром toggle» сворачивается и разворачивается не текст под ней, как это задумано, а вот этот текст «На этом примере показана возможность сворачивания и разворачивания элемента с помощью кода JavaScript. Нажмите на кнопку, чтобы увидеть этот эффект.» Находящийся выше нашей кнопки
                                                                      1. Александр Мальцев
                                                                        Александр Мальцев
                                                                        27.08.2015, 15:17
                                                                        Спасибо, Артём. Поправил код.
                                                                      2. Игорь
                                                                        Игорь
                                                                        04.08.2015, 18:42
                                                                        Здравствуйте!
                                                                        Такая ситуация:
                                                                        Одностраничный сайт.
                                                                        Стандартное меню 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. Александр Мальцев
                                                                          Александр Мальцев
                                                                          05.08.2015, 15:00
                                                                          Здраствуйте.
                                                                          В 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. Игорь
                                                                            Игорь
                                                                            05.08.2015, 16:44
                                                                            Огромное спасибо! У Вас отличный ресурс. Добавил в закладки
                                                                        2. Julja
                                                                          Julja
                                                                          28.07.2015, 18:20
                                                                          Весьма доходчиво. Однако, как сделать этот аккордеон вертикальным? это возможно с панелями или есть альтернативный вариант?
                                                                          1. Александр Мальцев
                                                                            Александр Мальцев
                                                                            02.08.2015, 16:15
                                                                            Можно сделать так.
                                                                            Код 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>
                                                                            1. Александр Мальцев
                                                                              Александр Мальцев
                                                                              29.07.2015, 15:37
                                                                              Так просто его переделать не получится. Появится время, попробую поэкспериментировать с панелями и сообщу Вам результат.

                                                                              А пока можете поискать их в интернете, там их достаточно много…
                                                                            2. Станислав
                                                                              Станислав
                                                                              08.05.2015, 15:34
                                                                              Подскажите пожалуйста что не так в этом куске кода?

                                                                              Панель отображается открытой, но при нажатии не сворачивается/разворачивается.
                                                                              <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. Александр Мальцев
                                                                                Александр Мальцев
                                                                                08.05.2015, 15:47
                                                                                Необходимо добавить к элементу a атрибут data-toggle=«collapse».
                                                                                ...
                                                                                <a data-toggle="collapse" class="accordion-toggle" href="#accordion1_2" target="_parent">
                                                                                ...
                                                                                
                                                                              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.