Спойлер 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="".

Методы

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

События

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

$('#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="".

Методы

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

Все методы 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 с функциональностью «коллапса».

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

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

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

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

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

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

Тут я создал новый контейнер и ограничил его тэгами </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, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

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


  

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

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

или может отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора JQuery в его атрибуте href или data-target .
Несколько или могут показывать и скрывать элемент, если каждый из них ссылается на него со своим href или data-target attribute

Переключить первый элемент
Переключить второй элемент
Переключить оба элемента

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.

  

  

    

      

        

          Элемент складной группы №1
        
      
    

    

      

        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.
    
  
  

    

      

        

          Элемент складной группы №2
        
      
    
    

      

        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.
    
  
  

    

      

        

          Элемент складной группы № 3
        
      
    
    

      

        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 элемента управления не является кнопкой (например, или

  $ ('. Collapse'). Collapse ()  

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

  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь...
})  

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

  




   Фильтр по цене 
     
     
  
 


  

    
  500 долл. США  
    
  1000 долларов США  
  
  

  
   Фильтр по цене 
     
     

  

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

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

  


Связь с Href




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

  

  


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




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

  

  

   Переключить первый элемент 
   Переключить второй элемент 
   Переключить оба элемента 


  

    

      

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

    

      

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

  

  

    

      

        

          Заголовок 1
        
      
    

    


        

  

    
    

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

       Вот нижний колонтитул 
    
  
  

    
    

      
 Название карточки 
      
 Вот краткое описание карты.
    
    

       Вот нижний колонтитул 
    
  


    
  
  

    

      

        

          Заголовок 2
        
      
    
    

      

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

    

      

        

          Заголовок 3
        
      
    
    

      

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

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

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

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

  подробности {
  шрифт: 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;
}  

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

  подробности {
  шрифт: 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 черный;
}
  

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

  

  
    Ссылка com href
  
  
    Цель данных Botão com
  


  

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

  

  

    

      

        

          Grupo de itens colapsável # 1
        
      
    

    

      

        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.
    
  
  

    

      

        

          Grupo de itens colapsável # 2
        
      
    
    

      

        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.
    
  
  

    

      

        

          Grupo de itens colapsável # 3
        
      
    
    

      

        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.
    
  
  

  $ ('.collapse '). collapse ()  

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