Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Спойлер bootstrap 3: Bootstrap 3 — Аккордеон — ИТ Шеф

Содержание

Компоненты





Плагин спойлера Bootstrap позволяет вам переключать контент на ваших страницах с помощью нескольких классов благодаря некоторому полезному JavaScript.


Содержание


Пример


Нажмите кнопки ниже, чтобы показать и скрыть другой элемент с помощью изменений класса:


  • .collapse скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется data-toggle="collapse".




Link with href


Button with data-target


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>


Пример аакордеона


Расширьте режим сворачивания по умолчанию, чтобы создать аккордеон.



Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div role="tablist" aria-multiselectable="true">
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div role="tabpanel" aria-labelledby="headingOne">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingTwo">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingThree">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


Доступность


Обязательно добавьте aria-expanded к элементу управления. Этот атрибут явно определяет текущее состояние элемента спойлера для скринридеров и аналогичных вспомогательных технологий. Если элемент спойлера закрыт по умолчанию, он должен иметь значение aria-expanded="false". Если вы создали элемент спойлера открытым по умолчанию с помощью класса show вместо этого установите aria-expanded="true". Плагин автоматически переключит этот атрибут, основываясь на том, был или не был открыт или закрыт элемент спойлера.


Кроме того, если ваш элемент управления нацелен на единый элемент спойлера, т. е. атрибут data-target указывает на селектор id, вы можете добавить дополнительный атрибут aria-controls для элемента управления, содержащего id элемента спойлера. Современные скринридеры и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для навигации непосредственно к элементу спойлера.


Применение


Плагин collapse использует несколько классов:


  • .collapse скрывает содержимое
  • .collapse.show показывает содержимое
  • .collapsing добавляется, когда начинается переход, и удаляется, когда он заканчивается

Эти классы можно найти в файле _transitions.scss.


Через атрибуты данных


Просто добавьте data-toggle="collapse" и data-target в элемент, чтобы автоматически назначить управление элементом спойлера. Атрибут data-target принимает селектор CSS для применения спойлера. Обязательно добавьте класс collapse в сворачиваемый элемент. Если вы хотите открыть его по умолчанию, добавьте дополнительный show класса.



Через JavaScript


Включите вручную с помощью:


$('.collapse').collapse()

Опции


Опции могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-parent="".





Название Тип По умолчанию Описаие
parent selector false Если предоставлен селектор, тогда все элементы спойлера под указанным родителем будут закрыты при отображении этого элемента. (аналогично традиционному аккордеонному поведению — это зависит от класса panel)
toggle boolean true Переключает элемент спойлера при вызове

Методы


.collapse(options)


Активирует ваш контент как элемент спойлера. Принимает необязательный object.


$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')


Включает или отключает элемент спойлера.


.collapse('show')


Показывает элемент спойлера.


.collapse('hide')


Скрывает элемент спойлера.


События


Bootstrap класс спойлера предоставляет несколько событий для подключения к функции сворачивания.







Тип события Описание
show.bs.collapse Это событие срабатывает сразу после вызова метода экземпляра show.
shown.bs.collapse Это событие вызывается, когда элемент спойлера становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.collapse
Это событие вызывается сразу после вызова метода hide.
hidden.bs.collapse Это событие вызывается, когда элемент спойлера скрыт от пользователя (будет ждать завершения переходов CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Спойлер в Bootstrap.Как сделать, чтобы один открывался, другой закрывался? — Хабр Q&A

Здравствуйте, пытаюсь вставить спойлеры на сайт с Bootstrap, беру пример отсюда, но не выходит сделать, как в примере, чтобы один спойлер открывался, а другой вместе с тем закрывался. На сайте поставил код:

<div role="tablist" aria-multiselectable="true">
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div role="tabpanel" aria-labelledby="headingOne">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingTwo">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingThree">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Сам сайт. Подскажите пожалуйста, как сделать такое?

Collapse. Компоненты · Bootstrap. Версия v4.0.0

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.



Примеры


Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:


  • .collapse скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется атрибут data-toggle="collapse".




Ссылка с href


Кнопка с data-target


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Ссылка с href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>


Взаимодействие со множественными объектами


Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.



Переключить 1-ый элемент
Переключить 2-ой элемент
Переключить оба элемента


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
  <button type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>



Разворачиваемые панели


Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).



Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Разворачиваемая панель #1
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Разворачиваемая панель #2
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingTwo" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Разворачиваемая панель #3
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingThree" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>



Доступность


Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded="false". Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show, теперь используйте вместо этого класса aria-expanded="true" в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом).


Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на #id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему #id этого скрываемого элемента.


Использование


Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:


  • .collapse прячет содержимое
  • .collapse.show показывает содержимое
  • .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss.


Через атрибуты


Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse. Если он должен быть показан по умолчанию, добавьте в него класс show.


Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector". Обратитесь к демо для просмотра в действии.


Через JavaScript


Активируйте вручную:


$('.collapse').collapse()

Параметры


Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-, например data-parent="".





Имя Тип По умолч. Описание
parent selector | jQuery object | DOM element false Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса card). Атрибут нужно устанавливать в скрываемой зоне.
toggle boolean true Взаимодействует с скрываемым элементом по обращению

Методы


Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию по JavaScript.


.collapse(options)


Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.


$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')


Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).


.collapse('show')


Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse).


.collapse('hide')


Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse).


.collapse('dispose')


Уничтожает «коллпас» элемента.


События


Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».







Тип события Описание
show.bs.collapse Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.collapse Это событие наступает, когда элемент «коллапса» сделан видимым юзеру (будет ждать выполнения CSS-переходов).
hide.bs.collapse Это событие наступает немедленно по вызову метода hide.
hidden.bs.collapse Это событие наступает как только элемент «коллапса» скрыт от юзера (будет ждать выполнения CSS-переходов).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Спойлер на Bootstrap 3 – Telegraph

@honey_and_money

Сегодня разберем простую, но очень удобную структуру в веб-дизайне: спойлер.

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

Перейдем к реализации. Будем продолжать наш код из предыдущей статьи:

(В прошлый раз мы закончили на вкладках)

Тут я создал новый контейнер и ограничил его тэгами </br>, чтобы он отделялся от других элементов на странице.
Далее в контейнере нам надо создать кнопку и два div-блока (один вложен в другой)

Кнопку я сделал с классом «btn-primary», а далее идет блок с классом «collapse», который отвечает за содержимое (которое будет появляться и исчезать по клику). Внутри нашего блока есть еще один блок с классом «well» — этот блок просто отвечает за красивое отображение содержимого (красивая рамка и фон) — в принципе можно обойтись и без него.

Теперь нам надо связать нашу кнопку с блоком с содержимым. Это мы делали уже сто раз:

Тут я добавил блоку с классом «collapse» идентификатор (название может быть любым), а потом добавил это же название атрибуту href нашей кнопки (через решетку)

Ну и дописал кнопке атрибут data-toggle=»collapse» (название класса блока с содержимым) — теперь кнопка точно понимает за какой блок отвечает.

Ну и внутри блока с классом «well» вписал произвольное предложение.

Ах да, чуть не забыл — между тэгами <button> </button> надо вписать какое-нибудь слово — оно будет отображаться на нашей кнопке:

Вот и все. Сохраняем наш html-документ и обновляем страницу:

Спойлер готов — появляется и исчезает по кнопке. Удобно для всяких подсказок, необязательной информации (которая так же может понадобиться какому-то пользователю) и тому подобное.

@honey_and_money — Бизнес в IT с полного нуля

Как создать виджет свертывания в Bootstrap 5?

<

div itemprop=”articleBody”>

Свертывание имени – это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты при щелчке мышью. Аккордеон, спойлер и переключатели – хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap. Bootstrap 5 представил новый компонент аккордеона, поэтому не путайте с этими двумя.

Учебное пособие по свертыванию Bootstrap 5

  1. Введение в Bootstrap collapse
  2. Создание коллапса с атрибутом href
  3. Свернуть с помощью функции Data-toogle
  4. Свертывание нескольких целей
  5. Аккордеонный коллапс
  6. Сворачиваемое тело содержимого

1. Введение в Collapse

Компонент сворачивания состоит из двух элементов:

  • Базовый элемент для отображения или скрытия сворачивания.
  • Фактическое содержимое внутри свернутого контейнера.

Он использует следующие три класса CSS:

  • «.крах»Используется для сокрытия содержимого.
  • «.collapsing»Используется для применения эффекта перехода.
  • «.collapse.show»Используется для отображения содержимого.

Здесь мы обсудим создание трех типов сворачивания – с использованием атрибута href, с использованием переключения данных и стиля аккордеона.

2. Свернуть с атрибутом Href

В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь «переключение данных»Со значением«крах«. Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что содержимое скрыто при начальной загрузке страницы.

После триггера коллапса фактическое содержимое должно быть добавлено отдельным тегом

<

div>, идентифицируемым с тем же идентификатором атрибута href. Вы также должны добавить «.крах»К тегу div. Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.

Полный код коллапса с атрибутом href показан ниже:

<p>
<a data-toggle="collapse" href="https://www.webnots.com/bootstrap-collapse-tutorial/#linkcollapse" aria-expanded="false" aria-controls="Collapse">
Link with Href
</a>
</p>
<div>
<div>
Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing.
</div>
</div>

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

Вы всегда должны использовать код внутри основного раздела начального шаблона Bootstrap, который включает необходимый фреймворк CSS и JavaScript.

3. Свернуть с переключением данных.

Вместо атрибута href вы можете использовать «data-toggle = свернуть”С элементом кнопки для создания триггера, как показано ниже:

<p>
<button type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse">
Button with data-target
</button>
</p>
<div>
<div>
Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing.
</div>
</div>

Результат приведенного выше кода будет выглядеть, как показано ниже, аналогично примеру href.

4. Свертывание множественных тегов

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

<p>
  <a data-toggle="collapse" href="https://www.webnots.com/bootstrap-collapse-tutorial/#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a>
  <button type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button>
</p>
<div>
  <div>
    <div>
      <div>
            Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
            Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
</div>

На вашем сайте это будет выглядеть примерно так:

Пример свертывания начальной загрузки

5. Коллапс аккордеона

Последний и самый популярный вариант – создание аккордеона с использованием компонента сворачивания. Ниже приведен код аккордеона с тремя ползунками – первый имеет макет группы карточек, а остальные два имеют заголовок карточки с некоторым текстовым содержимым.

<div role="tablist" aria-multiselectable="true">
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="https://www.webnots.com/bootstrap-collapse-tutorial/#collapse1" aria-expanded="true" aria-controls="collapse1">
          Heading 1
        </a>
      </h5>
    </div>

    <div role="tabpanel" aria-labelledby="Firstheading">
<div>
        <div>
  <div>
    <img src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
    <div>
      <h5>Card Title</h5>
      <p>Here is a longer description of the card and the height will be auto aligned with flex box.</p>
    </div>
    <div>
      <small>Here is a footer</small>
    </div>
  </div>
  <div>
    <img src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2">
    <div>
      <h5>Card Title</h5>
      <p>Here is a shorter description of the card.</p>
    </div>
    <div>
      <small>Here is a footer</small>
    </div>
  </div>
</div>
</div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          Heading 2
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="secondheading">
      <div>
        Here is the content for the second section.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
          Heading 3
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingThree">
      <div>
        Here is the content for the third section.
      </div>
    </div>
  </div>
</div>

Это длинный блок кода, в основном из-за раздела группы карт для первого сворачивания. Давайте рассмотрим все элементы этого кода:

5.1. Аккордеон
  • Аккордеон заключен в теги div с уникальным идентификатором (#accordion в этом примере). А атрибут роли следует использовать как список вкладок.
  • Всего используются три складных раздела, и каждый раздел должен начинаться со своего собственного div. Мы использовали класс «.card» для каждого из этих разделов.
  • Каждый раздел карточки состоит из заголовка и сворачиваемого содержимого.
5.2. Заголовок
  • Класс “.card-header”Используется для заголовка вместе с уникальным идентификатором (Firstheading) и атрибутом роли со значением табуляции.
  • Внутри заголовка добавьте теги заголовков, в данном случае мы использовали h5.
  • Опять же, внутри тегов заголовков добавьте ссылку привязки со следующими классами / атрибутами:
    • Добавлять “.collapsed»Класс по аккордеону.
    • Добавлять переключение данных атрибут со значением как крах.
    • Добавлять родитель данных атрибут с тем же идентификатором, который использовался для первого (в данном случае #accordion).
    • Атрибут Href должен иметь идентификатор сворачиваемого содержимого: «# collapse1«.
    • Установите для aria-extended значение true, чтобы раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).
    • Установите значение атрибута aria-controls с тем же идентификатором значения атрибута Href (collapse1).

6. Сворачиваемое тело содержимого

  • Откройте новый тег после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка (collapse1).
  • Добавьте класс «.collapse показать», Чтобы показать содержимое открытым. Вы не должны использовать “.показывать»Для остальных разделов, поскольку они должны быть закрыты.
  • Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).
  • Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один блок и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух разделов.

Выполните тот же процесс для двух других разделов, и окончательный аккордеон должен выглядеть примерно так:


Изучите Bootstrap 5 (Индекс)


    </div>

Навигация по записям

Похожие записи

БНИОС — Что такое Bootstrap

Что такое Bootstrap

Создан в застенках компании Twitter, сначала использовался для собственных продуктов и назывался «Twitter Bootstrap», а позже был выпущен на волю. За это у него забрали слово Twitter из названия.

Bootstrap — это CSS/HTML фреймворк для создания сайтов. Другими словами, это набор инструментов для вёрстки. В нём есть ряд преимуществ, благодаря которым BS считается самым популярным из себе подобных.

Преимущества бутстрапа:
Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;
Масштабируемость — добавление новых элементов не нарушает общую структуру;
Лёгкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных. При этом не требуется использовать атрибуты типа «!important»;
Большое количество шаблонов;
Огромное сообщество разработчиков;
Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.
Особой популярностью пользуется Bootstrap для создания одностраничников или «лендингов» (landing page).

Уроки Bootstrap Верстка | #1.Введение
Уроки Bootstrap Верстка | #2. Система сетки. Grid
Уроки Bootstrap Верстка | #3. Настройка сетки
Уроки Bootstrap 3 Верстка | #4. Как сделать адаптивное меню
Уроки Bootstrap 3 Верстка | #5. Положение меню и как сделать dropdown меню
Уроки Bootstrap 3 Верстка | #6. Как сделать слайдер
Уроки Bootstrap 3 Верстка | #7. Что такое Glyphicons и как ими управлять
Уроки Bootstrap 3 Верстка | #8. Классы кнопок в бутстрап
Уроки Bootstrap 3 Верстка | #9. Группы кнопок в бутстрап
Уроки Bootstrap 3 Верстка | #10. Кнопки с выпадающим меню ( Dropdown menu)
Уроки Bootstrap 3 Верстка | #11. Как сделать вкладки табы (Tabs)
Уроки Bootstrap 3 Верстка | #12. Как сделать спойлер
Уроки Bootstrap 3 Верстка | #13. Как сделать аккордеон
Уроки Bootstrap 3 Верстка | #14. Как сделать модальное или диалоговое окно
Уроки Bootstrap 3 Верстка | #15. Как сделать форму регистрации или авторизации

Уроки Bootstrap 3 Верстка | #16. Создаем индикаторы прогресса
Уроки Bootstrap 3 Верстка | #17. Пагинация
Уроки Bootstrap 3 Верстка | #18. Как сделать tooltip и всплывающие окна
Уроки Bootstrap 3 Верстка | #19. Создаем breadcrumbs
Что нового в Bootstrap 4. Все изменения сетки
Bootstrap 4 — Обзор бета версии. Что ожидать от релиза?

 

CherryFramework 4. Как сделать так, чтобы вкладка аккордеона была по умолчанию открыта

Из этого туториала Вы узнаете, как сделать так, чтобы вкладка аккордеона была по умолчанию закрыта в шаблонах на основе CherryFramework 4.

Все вкладки аккордеона, которые Вы создаёте при помощи шорткода ‘cherry_accordion’, закрыты по умолчанию:

Давайте узнаем, как сделать вкладку аккордеона открытой:

Редактирование существующего аккордеона

  1. Войдите в вашу админ панель WordPress;

  2. Откройте любую страницу с готовым к использованию аккордеоном (например, страница ЧаВо (FAQs)):

  3. Найдите шорткоды ‘cherry_spoiler title’. Каждый шорткод представляет отдельную вкладку аккордеона. Найдите вкладку, в которую Вы хотите внести изменения, например:

    [cherry_spoiler title="Lorem ipsum dolor sit amet?"]
  4. Добавьте часть шорткода open=»yes» в шорткод ‘cherry_spoiler title’, для того чтобы вкладка аккордеона была открыта по умолчанию:

    [cherry_spoiler title="Lorem ipsum dolor sit amet?" open="yes"]
  5. Сохраните изменения;

  6. Обновите вашу страницу для просмотра изменений. Теперь вкладка будет открыта по умолчанию:

Создание нового аккордеона

  1. Создайте новую страницу/запись;

  2. Нажмите на кнопку ‘Ввести шорткод’ (Insert Shortcode):

  3. Добавьте шорткод ‘accordion’:

  4. Найдите шорткоды ‘cherry_spoiler title’. Каждый шорткод представляет отдельную активную вкладку. Найдите вкладку в которую Вы хотите внести изменения, например:

    [cherry_spoiler title="Spoiler Title"]Content1[/cherry_spoiler]
  5. Добавьте часть шорткода open=»yes» в шорткод ‘cherry_spoiler title’, для того чтобы вкладка шорткода была открыта по умолчанию:

    [cherry_spoiler title="Spoiler Title" open="yes"]Content1[/cherry_spoiler]
  6. Используйте кнопку ‘Живой просмотр’ (Live Preview) для просмотра изменений и на кнопку ‘Вставить шорткод’ (Insert Shortcode), для того чтобы добавить шорткод в страницу/запись;

  7. Сохраните изменения. Вы создали новый аккордеон. Теперь вкладка будет открыта по умолчанию:

Вы можете также ознакомиться с детальным видео-туториалом ниже:

CherryFramework 4. Как сделать так, чтобы вкладка аккордиона была по умолчанию открыта

Свернуть · Bootstrap v4.5

Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.

Как это работает

Плагин JavaScript сворачивания используется для отображения и скрытия содержимого. Кнопки или якоря используются в качестве триггеров, которые сопоставляются с определенными элементами, которые вы переключаете. Сворачивание элемента приведет к анимации высоты с текущего значения до 0 . Учитывая, как CSS обрабатывает анимацию, вы не можете использовать padding на .свернуть элемент . Вместо этого используйте класс как независимый элемент оболочки.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:

  • .collapse скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.show показывает содержимое

Можно использовать ссылку с атрибутом href или кнопку с атрибутом data-target .В обоих случаях требуется data-toggle = "collapse" .

Ссылка на href

Кнопка с целью данных

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

Несколько целей

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

Пример «Аккордеон»

Используя компонент карты, вы можете расширить стандартное поведение сворачивания для создания аккордеона. Чтобы правильно добиться стиля гармошки, обязательно используйте .accordion в качестве обертки.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

  

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Доступность

Не забудьте добавить aria-extended к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-extended = "false" . Если вы настроили открывать складной элемент по умолчанию с использованием класса show , установите вместо этого aria-extended = "true" в элементе управления.Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же складному элементу). Если элемент HTML элемента управления не является кнопкой (например, или

), к элементу следует добавить атрибут role = "button" .

Если ваш элемент управления нацелен на единственный складной элемент — i.е. атрибут data-target указывает на селектор id — вы должны добавить атрибут aria-controls к элементу управления, содержащий id сворачиваемого элемента. Современные программы чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.

Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1.1 шаблон аккордеона — вам нужно будет включить их самостоятельно в собственный JavaScript.

Использование

Плагин коллапса использует несколько классов для работы с тяжелыми грузами:

  • .collapse скрывает содержимое
  • .collapse.show показывает содержимое
  • .collapsing добавляется при запуске перехода и удаляется при его завершении

Эти классы можно найти в _transitions.scss .

Через атрибуты данных

Просто добавьте data-toggle = "collapse" и data-target к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-target принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show .

Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных data-parent = "# selector" .Обратитесь к демонстрации, чтобы увидеть это в действии.

Через JavaScript

Включить вручную с помощью:

  $ ('. Collapse'). Collapse ()  

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-parent = "" .

Селектор

Имя Тип По умолчанию Описание
родитель | объект jQuery | Элемент DOM ложь Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента.(аналогично традиционному поведению аккордеона — это зависит от карты класса ). Атрибут должен быть установлен в целевой складной области.
переключатель логическое правда Переключает складной элемент при вызове

Методы

Асинхронные методы и переходы

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

См. Нашу документацию по JavaScript для получения дополнительной информации.

. Свернуть (опции)

Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры , объект .

  $ ('# myCollapsible'). Collapse ({
  toggle: false
})  

.свернуть ('переключить')

Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse ).

.collapse ('показать')

Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (то есть до показа .bs.collapse ).

.collapse ('скрыть')

Скрывает складной элемент. Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента (т.е. до того, как произойдет событие hidden.bs.collapse ).

.collapse ('утилизировать')

Разрушает обрушение элемента.

События

Класс collapse

Bootstrap предоставляет несколько событий для подключения к функциональности свертывания.

Показано

Тип события Описание
show.bs.collapse Это событие запускается немедленно при вызове метода экземпляра show .
.bs.collapse Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.collapse Это событие запускается сразу после вызова метода hide .
hidden.bs.collapse Это событие вызывается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь...
})  

jquery — изменение значка Twitter bootstrap 3.0 при свертывании

Используя только CSS, значок сворачивания начальной загрузки можно изменить с помощью ваших предопределенных значков:

  a [aria-extended = true].glyphicon-plus {
    дисплей: нет;
}
a [aria-extended = false] .glyphicon-minus {
    дисплей: нет;
}
.указатель{
  курсор: указатель;
}  
  



  

В вашем HTML добавьте aria-extended = "false" и добавьте два значка, которые вам нужно установить на панели сворачивания.Типа,

  
  

И управлять им из css. Когда полоса сворачивания расширяется, тогда

  a [aria-extended = true] .glyphicon-plus {
    дисплей: нет;
}
  

иначе будет

  a [aria-extended = false].glyphicon-minus {
    дисплей: нет;
}
  

Запустите фрагмент, и я думаю, вам просто нужно это ...

Как создать Bootstrap 5 Collapse? »WebNots

Свертывание имени - это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты при щелчке мышью. Аккордеон, спойлер и переключатели - хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap.Bootstrap 5 представил новый компонент аккордеона, поэтому не путайте с этими двумя.

Учебное пособие по свертыванию Bootstrap 5

  1. Введение в свертывание Bootstrap
  2. Создание сворачивания с атрибутом href
  3. Сворачивание с помощью data-toogle
  4. Сворачивание нескольких целевых объектов
  5. Сворачивание аккордеона
  6. Сворачиваемое тело содержимого

1. Введение в свертывание

Компонент сворачивания состоит из двух элементов:

  • Базовый элемент для отображения или скрытия сворачивания.
  • Фактическое содержимое в свернутом контейнере.

Он использует следующие три класса CSS:

  • « .collapse » используется для скрытия содержимого.
  • « .collapsing » используется для применения эффекта перехода.
  • « .collapse.show » используется для отображения содержимого.

Здесь мы обсудим создание трех типов сворачивания - с использованием атрибута href, с использованием переключения данных и стиля аккордеона.

2.Свернуть с атрибутом Href

В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь атрибут « data-toggle » со значением « collapse ». Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что содержимое скрыто при начальной загрузке страницы.

После триггера свертывания фактическое содержимое должно быть добавлено с отдельным тегом

, идентифицируемым с тем же идентификатором атрибута href.Вы также должны добавить к тегу div класс « .collapse ». Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.

Полный код для сворачивания с атрибутом href показан ниже:

  

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

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

Вы всегда должны использовать код внутри основного раздела начального шаблона Bootstrap, который включает необходимый фреймворк CSS и JavaScript.

3. Свернуть с переключением данных

Вместо атрибута href вы можете использовать « data-toggle = collapse » с элементом кнопки для создания триггера, как показано ниже:

  

Вот контент для блока, который будет отображаться при нажатии кнопки.Для сворачивания используется кнопка с атрибутом data-target.

Результат выполнения приведенного выше кода будет выглядеть, как показано ниже, аналогично примеру href.

4. Свертывание нескольких тегов

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

  

Вот содержимое блока, которое будет показано при нажатии первой кнопки. Для сворачивания используется кнопка с атрибутом data-target.
Вот содержимое блока, которое будет показано при нажатии второй кнопки.Для сворачивания используется кнопка с атрибутом data-target.

На вашем сайте это будет выглядеть примерно так:

Пример свертывания начальной загрузки

5. Разрушение аккордеона

Последний и самый популярный вариант - создание аккордеона с использованием компонента сворачивания. Ниже приведен код аккордеона с тремя ползунками - первый имеет макет группы карточек, а остальные два имеют заголовок карточки с некоторым текстовым содержимым.

  
 Изображение гибкой карты 1
Название карточки

Вот более подробное описание карточки, и высота будет автоматически выровнена по гибкой рамке.

Вот нижний колонтитул
Изображение Flex Card 2
Название карточки

Вот краткое описание карты.

Вот нижний колонтитул
Вот содержание второго раздела.
Вот содержание третьего раздела.

Это длинный кодовый блок, в основном из-за секции группы карт для первого свертывания.Давайте рассмотрим все элементы этого кода:

5.1. Аккордеон
  • Аккордеон заключен в теги div с уникальным идентификатором (#accordion в этом примере). А атрибут роли следует использовать как список вкладок.
  • Всего используются три складных секции, и каждая секция должна начинаться со своего собственного div. Мы использовали класс «.card» для каждого из этих разделов.
  • Каждый раздел карточки состоит из заголовка и сворачиваемого содержимого.
5.2. Товарная позиция

.

  • Класс « .card-header » используется для заголовка вместе с уникальным идентификатором (Firstheading) и атрибутом роли со значением в виде табуляции.
  • Внутри заголовка добавьте теги заголовка, в данном случае мы использовали h5.
  • Снова внутри тегов заголовков добавьте ссылку привязки со следующим классом / атрибутами:
    • Добавьте класс « .collapsed » для аккордеона.
    • Добавьте атрибут data-toggle со значением collapse .
    • Добавить атрибут data-parent с тем же идентификатором, который использовался для первого
      (в данном случае #accordion).
    • Атрибут Href должен иметь идентификатор сворачиваемого содержимого « # collapse1 ».
    • Установите для aria-extended значение true, чтобы раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).
    • Установить значение атрибута aria-controls с тем же идентификатором, что и значение атрибута Href ( collapse1 ).

6. Тело складного содержимого

  • Откройте новый тег
    после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка ( collapse1 ).
  • Добавьте класс « .collapse show », чтобы отображать содержимое открытым. Вы не должны использовать « .show » для остальных разделов, так как они должны быть закрыты.
  • Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).
  • Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один блок и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух разделов.

Повторите тот же процесс для двух других разделов, и окончательный аккордеон должен выглядеть примерно так:


Learn Bootstrap 5 (Индекс)


Как использовать Bootstrap Accordions для организации страниц часто задаваемых вопросов

Подпишитесь на информационный бюллетень нашего блога.

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

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

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

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

HTML

HTML использует некоторые встроенные компоненты Bootstrap, такие как свертывание и интервал по умолчанию:

Часто задаваемые вопросы

С Solodev CMS вы и ваши посетители получите выгоду от точно настроенного стека технологий, который обеспечивает высочайший уровень производительности, скорости и вовлеченности сайта - и вносит больший вклад в вашу прибыль.Наши пользователи полюбили:

  • Быстрое развертывание в самой безопасной и стабильной облачной инфраструктуре, доступной на рынке.
  • Масштабируемость - платите за то, что вам нужно сегодня, и за дополнительные возможности по мере роста.
  • Все навороты других вариантов корпоративной CMS, но без ограничений дизайна - эта CMS просто позволяет вам реализовать ваши творческие замыслы.
  • Великолепная поддержка со стороны команды профессионалов Solodev - здесь, когда они вам понадобятся.

Создать веб-сайт очень просто.Обладая практическими знаниями HTML и CSS, вы сможете создать и запустить сайт в кратчайшие сроки.

Используя технологию Amazon AWS, которая является лидером отрасли по надежности, вы сможете получить время безотказной работы порядка 99.95%.

Да, Solodev CMS создана для удовлетворения потребностей компании любого размера.С помощью нашей системы управления несколькими сайтами вы сможете легко управлять всеми своими веб-сайтами.

CSS

CSS используется только для дополнительного форматирования в дополнение к добавлению сворачиваемых значков стрелок (через FontAwesome) в качестве дополнительных индикаторов:

h3 {
семейство шрифтов: Arial, Verdana;
font-weight: 800;
размер шрифта: 2.5рем;
цвет: # 091f2f;
преобразование текста: прописные буквы;
}
.accordion-section .panel-default> .panel-heading {
граница: 0;
фон: # f4f4f4;
отступ: 0;
}
.accordion-section .panel-default .panel-title a {
дисплей: блок;
стиль шрифта: курсив;
размер шрифта: 1,5 бэр;
}
.accordion-section .panel-default .panel-title a: after {
семейство шрифтов: 'FontAwesome';
стиль шрифта: нормальный;
размер шрифта: 3rem;
содержание: "\ f106";
цвет: # 1f7de2;
float: right;
маржа сверху: -12 пикселей;
}
.аккордеон-раздел .panel-default .panel-title a.collapsed: after {
содержание: "\ f107";
}
.accordion-section .panel-default .panel-body {
размер шрифта: 1,2 бэр;
}

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

Хотите увидеть, как эта функция может выглядеть на вашем сайте, прежде чем тратить время на кодирование? Сначала попробуйте его в JSFiddle ниже! Не забудьте настроить окно браузера на различные размеры, чтобы точно видеть, как веб-сайт реагирует в мобильном формате!

Сводный тег HTML

Пример

Использование элемента

:

Epcot Center

Epcot - это
тематический парк в Walt Disney World Resort с захватывающими аттракционами,
международные павильоны, отмеченные наградами фейерверки и сезонные специальные
События.

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Тег

определяет видимый заголовок для элемента

.
Заголовок можно щелкнуть, чтобы просмотреть / скрыть подробности.

Примечание: Элемент

должен быть первым дочерним элементом элемента

.


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую элемент.

Элемент
<резюме> 12,0 79,0 49,0 6,0 15,0

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.


Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.



Другие примеры

Пример

Используйте CSS для стилизации

и

:

подробности> сводка {
padding: 4px;
ширина: 200 пикселей;
цвет фона: #eeeeee;
граница: отсутствует;
box-shadow: 1px 1px 2px #bbbbbb;
курсор: указатель;
}

подробности> p {
background-color: #eeeeee;
отступ: 4 пикселя;
маржа: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}

Epcot Center

Epcot - тематический парк в Уолт Дисней
World Resort с захватывающими аттракционами, международными павильонами,
отмеченные наградами фейерверки и сезонные специальные мероприятия.


Попробуй сам "


Связанные страницы

Ссылка на HTML DOM: сводный объект


Настройки CSS по умолчанию

Большинство браузеров отображают элемент

со следующими значениями по умолчанию:

сводка {
дисплей: блок;
}

: Элемент раскрытия сведений - HTML: язык разметки гипертекста

HTML-элемент

создает виджет раскрытия информации, в котором информация видна только тогда, когда виджет переключен в «открытое» состояние.Сводка или метка должны быть предоставлены с использованием элемента

.

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

используется в качестве метки для виджета раскрытия информации.

Виджет <подробности> может находиться в одном из двух состояний. Состояние по умолчанию закрыто отображает только треугольник и метку внутри

(или строку по умолчанию, определяемую пользовательским агентом, если нет

).

Когда пользователь нажимает на виджет или фокусирует его, а затем нажимает клавишу пробела, он «поворачивается», открывая его содержимое. Обычное использование треугольника, который вращается или поворачивается для обозначения открытия или закрытия виджета, является причиной того, что их иногда называют «извилинами».

Вы можете использовать CSS для стилизации виджета раскрытия информации, и вы можете программно открывать и закрывать виджет, устанавливая / удаляя его атрибут open . К сожалению, в настоящее время нет встроенного способа анимировать переход между открытием и закрытием.

По умолчанию в закрытом состоянии виджет имеет высоту только для отображения треугольника раскрытия и сводки. Когда он открыт, он расширяется, чтобы отобразить детали, содержащиеся внутри.

Полностью совместимые со стандартами реализации автоматически применяют CSS display : list-item к элементу

. Вы можете использовать это для дальнейшей настройки его внешнего вида. Дополнительные сведения см. В разделе «Настройка виджета раскрытия информации».

Этот элемент включает глобальные атрибуты.

открыто

Этот логический атрибут указывает, видны ли в данный момент подробности, то есть содержимое элемента

. Подробности отображаются, когда этот атрибут существует, или скрыты, когда этот атрибут отсутствует. По умолчанию этот атрибут отсутствует, что означает, что детали не видны.

Примечание: Вы должны полностью удалить этот атрибут, чтобы детали были скрыты. open = "false" делает детали видимыми, поскольку этот атрибут является логическим.

В дополнение к обычным событиям, поддерживаемым элементами HTML, элемент

поддерживает событие toggle , которое отправляется элементу

всякий раз, когда его состояние изменяется с открытого на закрытое. Он отправляется после того, как состояние изменено, хотя, если состояние изменяется несколько раз до того, как браузер сможет отправить событие, события объединяются, так что отправляется только одно.

Вы можете использовать прослушиватель событий для события toggle , чтобы определить, когда виджет меняет состояние:

  details.addEventListener ("toggle", event => {
  if (details.open) {
    
  } еще {
    
  }
});  

Простой пример раскрытия

В этом примере показан простой элемент

с

.

  <подробности>
   Системные требования 
  

Требуется компьютер с операционной системой.Компьютер должна иметь некоторую память и в идеале какое-то долговременное хранилище. Устройство ввода, а также некоторая форма устройства вывода - это рекомендуется.

Результат этого HTML:

Создание открытого окна раскрытия информации

Чтобы запустить поле <детали> в открытом состоянии, добавьте логический атрибут open :

  <подробности открыты>
   Системные требования 
  

Требуется компьютер с операционной системой.Компьютер должна иметь некоторую память и в идеале какое-то долговременное хранилище. Устройство ввода, а также некоторая форма устройства вывода - это рекомендуется.

Результат:

Настройка внешнего вида

Теперь давайте применим CSS, чтобы настроить внешний вид окна раскрытия информации.

CSS
  подробности {
  шрифт: 16px «Open Sans», Calibri, без засечек;
  ширина: 620 пикселей;
}

подробности> сводка {
  отступ: 2px 6px;
  ширина: 15em;
  цвет фона: #ddd;
  граница: нет;
  box-shadow: 3px 3px 4px черный;
  курсор: указатель;
}

подробнее> p {
  радиус границы: 0 0 10 пикселей 10 пикселей;
  цвет фона: #ddd;
  отступ: 2px 6px;
  маржа: 0;
  box-shadow: 3px 3px 4px черный;
}

подробности [open]> резюме {
  цвет фона: #ccf;
}  

Этот CSS создает вид, похожий на интерфейс с вкладками, где щелчок по вкладке открывает ее, чтобы показать ее содержимое.

Селектор подробности [open] может использоваться для стилизации открытого элемента.

HTML
  <подробности>
   Системные требования 
  

Требуется компьютер с операционной системой. Компьютер должна иметь некоторую память и в идеале какое-то долговременное хранилище. Устройство ввода, а также некоторая форма устройства вывода - это рекомендуется.

Результат

Настройка виджета раскрытия информации

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

Элемент

поддерживает сокращенное свойство в стиле списка и его полные свойства, такие как list-style-type , для изменения треугольника раскрытия на все, что вы выберете (обычно с list-style-image ). Например, мы можем удалить значок виджета раскрытия информации, установив list-style: none .

CSS
  подробности {
  шрифт: 16px «Open Sans», Calibri, без засечек;
  ширина: 620 пикселей;
}

подробности> сводка {
  отступ: 2px 6px;
  ширина: 15em;
  цвет фона: #ddd;
  граница: нет;
  box-shadow: 3px 3px 4px черный;
  курсор: указатель;
  стиль списка: нет;
}

подробнее> p {
  радиус границы: 0 0 10 пикселей 10 пикселей;
  цвет фона: #ddd;
  отступ: 2px 6px;
  маржа: 0;
  box-shadow: 3px 3px 4px черный;
}
  

Этот CSS создает вид, похожий на интерфейс с вкладками, где активация вкладки раскрывается и открывает ее, чтобы показать ее содержимое.

HTML
  <подробности>
   Системные требования 
  

Требуется компьютер с операционной системой. Компьютер должна иметь некоторую память и в идеале какое-то долговременное хранилище. Устройство ввода, а также некоторая форма устройства вывода - это рекомендуется.

Результат

Таблицы BCD загружаются только в браузере

Свернуть · Bootstrap em Português

Альтернативно можно просматривать проекты, связанные с классами и плагинами JavaScript.

Como funciona

Плагин Javascript collapse используется для большинства приложений. Botões ou âncoras são usados ​​como gatilhos que são mapeados para elementos específicos que Você alterna visibilidade. Mostrar um elemento (de tal maneira) vai animar a height , de seu valor atual, пункт 0 . Добавить в CSS файл с анимацией, вокал без использования , отступ em um elemento .collapse . Pelo contrário, используйте esta classe como um elemento pai independente.

Пример

Clique nos botões abaixo para mostrar e esconder outro elemento, através de mudanças de classes:

  • .collapse esconde o context;
  • .collapsing é aplicado durante a transição;
  • .collapse.show mostra o context.

Você pode usar um link com o atributo href ou um botão com data-target . Em ambos casos, data-toggle = "collapse" exigido.

Ссылка com href

Цель данных Botão com

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

Vários alvos

Um

Anim pariatur cliche pronderit, enim alemanha 7x1 brasil life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

Пример

Использование или компонентная карта, расширитель вокала или модуль для свертывания, для условий.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non alemanha 0 x 2 coreia do sul cupidatat skateboard dolor brunch. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

  
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, non alemanha 0 x 2 coreia do sul cupidatat skateboard dolor brunch. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Acessibilidade

Воспроизвести фактическую реализацию Bootstrap без использования различных методов описания без шаблона WAI-ARIA Authoring Practices 1.1. Você vai Precisar include elas, com seu proprio JavaScript.
d

Modo de uso

O plugin collapse usa algumas classes para cumprir seu dever:

  • .крах esconde o контеудо;
  • .collapse.show mostra o context;
  • .collapsing é adicionado quando a transição inicia e removeido quando finaliza.

Essas classes podem ser encontradas em _transitions.scss .

Через данные атрибута

  • Быстро добавить data-toggle = "collapse" e um data-target no elemento para, automaticamente, atribuir control em um ou mais elementos colapsáveis;
    • Атрибут data-target aceita um seletor CSS para aplicar or colapso.
  • Устанавливает дополнительный элемент по классу .collapse нет элемента colapsável.
    • Se quer que ele esteja aberto por padrão, используйте classe adicional show .

Для того, чтобы изменить размер области, используйте атрибут data-parent = "# seletor" . Veja a демонстрация, пара ver isso em ação.

Через JavaScript

Ative, manualmente, usando:

  $ ('.collapse '). collapse ()  

Опции

Варианты действий с использованием атрибутов данных или JavaScript. Для атрибутов данных не требуется префикса data- и data-parent = "" .

Ном Типо Padrão Описание
родитель seletor | объект jQuery | elemento DOM ложь Se o pai é provido, então, todos elementos colapsáveis ​​dentro dele vão ser fechados quando este item colapsável é mostrado (semelhante ao comportamento do acordeão, dependendo da classe do card ).O atributo deve ser Definido na área colapsável do alvo.
переключатель логическое правда Alterna o elemento colapsável, na invocação.

Métodos

Métodos é transições assíncronas

Todos métodos API são assíncronos e iniciam a transição . Eles retornam ao invocador, assim que a transição é iniciada, mas que ela finalize .Além do mais, uma chamada de método em um component transicionando é ignorada .

Veja nossa documentação JavaScript, para mais informação.

. Свернуть (опции)

Ativa seu context como sendo um elemento colapsável. Aceita um objeto de opções, opcionalmente.

  $ ('# myCollapsible'). Collapse ({
  toggle: false
})  

.collapse ('переключение')

Alterna um elemento colapsável para mostrar ou escondê-lo. Retorna ao invocador antes do elemento colapsável ter sido mostrado ou escondido, de fato (antes do evento shown.bs.collapse or hidden.bs.collapse ocorrer).

.collapse ('показать')

Mostra um elemento colapsável. Retorna ao invocador antes do elemento colapsável ter sidorado, de fato (antes do evento shown.bs.collapse ocorrer).

.collapse ('скрыть')

Esconde um elemento colapsável. Retorna ao invocar antes do elemento colapsável ter sido escondido, de fato (antes do evento hidden.bs.collapse ocorrer).

.collapse ('утилизировать')

Destroi o colapso de um elemento.

Eventos

Класс Bootstrap выполняет сворачивание элементов событий для работы с функциональными возможностями.

Показано

Тип события Описание
показать.bs.collapse Este evento é acionado, imediatamente, quando o método show é chamado.
.bs.collapse Este evento é acionado quando um elemento colapsável fica visível para o usuário (espera as transições CSS finalizarem).
hide.bs.collapse Este evento é acionado, imediatamente, quando o método hide é chamado.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *