welpodron.accordion

Аккордеон

(collapse accordion.item) Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт. Однако, если ему добавить атрибут (data-active) то он будет открыт по умолчанию . Для того чтобы открыть содержимое свернутого контента можно воспользоваться следующими (data-action) у (collapse.control): (show). Для того чтобы скрыть содержимое свернутого контента можно воспользоваться следующими (data-action) у (collapse.control): (hide). Для того чтобы переключать состояния скрытия/открытия содержимое свернутого контента можно воспользоваться следующими (data-action) у (collapse.control): (toggle).

<div data-accordion>
  <button
    data-action="toggle"
    data-collapse-id="collapse_example_01"
    type="button"
  >
    <b>(collapse.control)</b> <b>(toggle)</b> Свернуть/Развернуть
  </button>
  <div data-accordion-item data-collapse data-active id="collapse_example_01">
    <p>
      <b>(collapse accordion.item)</b> Это некий заполнитель для горизонтального
      сворачивания. По умолчанию он скрыт. Однако, если ему добавить атрибут
      <b>(data-active)</b> то он будет открыт по умолчанию . Для того чтобы
      открыть содержимое свернутого контента можно воспользоваться следующими
      <b>(data-action)</b> у <b>(collapse.control)</b>: <b>(show)</b>. Для того
      чтобы скрыть содержимое свернутого контента можно воспользоваться
      следующими <b>(data-action)</b> у <b>(collapse.control)</b>:
      <b>(hide)</b>. Для того чтобы переключать состояния скрытия/открытия
      содержимое свернутого контента можно воспользоваться следующими
      <b>(data-action)</b> у <b> (collapse.control) </b>: <b>(toggle)</b>.
    </p>
  </div>
  <button
    data-action="toggle"
    data-collapse-id="collapse_example_02"
    type="button"
  >
    <b>(collapse.control)</b> <b>(toggle)</b> Свернуть/Развернуть
  </button>
  <div data-accordion-item data-collapse id="collapse_example_02">
    <p>
      <b>(collapse accordion.item)</b> Это некий заполнитель для горизонтального
      сворачивания. По умолчанию он скрыт. Однако, если ему добавить атрибут
      <b>(data-active)</b> то он будет открыт по умолчанию . Для того чтобы
      открыть содержимое свернутого контента можно воспользоваться следующими
      <b>(data-action)</b> у <b>(collapse.control)</b>: <b>(show)</b>. Для того
      чтобы скрыть содержимое свернутого контента можно воспользоваться
      следующими <b>(data-action)</b> у <b>(collapse.control)</b>:
      <b>(hide)</b>. Для того чтобы переключать состояния скрытия/открытия
      содержимое свернутого контента можно воспользоваться следующими
      <b>(data-action)</b> у <b> (collapse.control) </b>: <b>(toggle)</b>.
    </p>
  </div>
  <button
    data-action="toggle"
    data-collapse-id="collapse_example_03"
    type="button"
  >
    <b>(collapse.control)</b> <b>(toggle)</b> Свернуть/Развернуть
  </button>
  <div data-accordion-item data-collapse id="collapse_example_03">
    <p>
      <b>(collapse accordion.item)</b> Это некий заполнитель для горизонтального
      сворачивания. По умолчанию он скрыт. Однако, если ему добавить атрибут
      <b>(data-active)</b> то он будет открыт по умолчанию . Для того чтобы
      открыть содержимое свернутого контента можно воспользоваться следующими
      <b>(data-action)</b> у <b>(collapse.control)</b>: <b>(show)</b>. Для того
      чтобы скрыть содержимое свернутого контента можно воспользоваться
      следующими <b>(data-action)</b> у <b>(collapse.control)</b>:
      <b>(hide)</b>. Для того чтобы переключать состояния скрытия/открытия
      содержимое свернутого контента можно воспользоваться следующими
      <b>(data-action)</b> у <b> (collapse.control) </b>: <b>(toggle)</b>.
    </p>
  </div>
</div>

Установка / Подключение

Список PHP библиотек:

welpodron.core

Список зависимостей:

welpodron.collapse

Внимание

Перед подключением компонента убедитесь, что все необходимые для требуемого компонента зависимости установлены и подключены!

Установка и подключение компонента происходит в соответствии с документацией

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

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

html
<div data-accordion>
  Это accordion ...
  <div
    data-collapse-id="collapse_example_01"
    data-action="[toggle] [show] [hide]"
    [data-args]
  >
    Это collapse.control ...
  </div>
  <div [data-active] data-accordion-item id="collapse_example_01" data-collapse>
    Это collapse и accordion.item ...
  </div>
  <div
    data-collapse-id="collapse_example_02"
    data-action="[toggle] [show] [hide]"
    [data-args]
  >
    Это collapse.control ...
  </div>
  <div [data-active] data-accordion-item id="collapse_example_02" data-collapse>
    Это collapse и accordion.item ...
  </div>
  ...
  <div
    data-collapse-id="collapse_example_03"
    data-action="[toggle] [show] [hide]"
    [data-args]
  >
    Это collapse.control ...
  </div>
  <div [data-active] data-accordion-item id="collapse_example_03" data-collapse>
    Это collapse и accordion.item ...
  </div>
  ...
</div>

HTML атрибуты

accordion

Атрибут: data-accordion
- Описание: Указатель компонента
- Обязателен: Да

collapse (accordion.item)

Атрибут: data-accordion-item
- Описание: Указатель принадлежности к компоненту accordion
- Обязателен: Да*

* - в случае если атрибут data-accordion-item не будет указан, тег, лежащий внутри тега с атрибутом accordion, не будет восприниматься как элемент accordion

Остальные атрибуты доступные collapse

в случае если атрибут data-active не будет указан ни одному data-accordion-item - активным элементом станет первый найденный data-accordion-item, лежащий внутри accordion

collapse.control

Остальные атрибуты доступные collapse.control

welpodron.accordion

Установка / Подключение​

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

Использование через HTML​

HTML атрибуты​

accordion​

collapse (accordion.item)​

collapse.control​