Что такое аккордеон
Аккордеоном называют образ вывода контента, когда кликом по заголовку можно сворачивать и разворачивать его содержимое.
В каких темах встречается
Данное руководство относится к темам семейства Super.
А именно, сама тема Super и все темы, которые вышли после неё – Sexy, Prestige... (список будет пополняться) =)
Как сделать
Чтобы сделать такой же функционал на ваших страницах, откройте редактор страницы.
Переведите его в режим HTML.
И вставьте в него следующий код:
<ul class="uk-accordion" data-uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 3</a>
<div class="uk-accordion-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
</div>
</li>
</ul>
Отредактируйте код под свои нужды.
Как добавить ещё один пункт
За каждый пункт аккордеона отвечает код, который находится между тегами <li></li>.
Чтобы добавить ещё один блок, просто скопируйте блок между тегами <li></li> (включая теги <li></li>).
Тонкая настройка
Чтобы пункт аккордеона был открыт, тегу <li> добавляется класс uk-open.
<li class="uk-open">
Если вы хотите, чтобы соседние пункты не сворачивались, замените первую строку аккордеона
<ul class="uk-accordion" data-uk-accordion>
На строку:
<ul class="uk-accordion" data-uk-accordion="multiple: true">
0 комментариев