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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

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

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

Параметры

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

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

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

Методы

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

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

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

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

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

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

События

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

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

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


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

...

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

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