Сворачиваемый список Foundation
Когда вы хотите скрыть часть содержимого, можно использовать сворачиваемый список.
Пример
<li class="accordion-navigation">
<a href="#demo">Простой сворачиваемый</a>
<div id="demo" class="content">
Rookie Tutorial -- Обучение — это не только технологии, но и мечты!!!
</div>
</li>
</ul>
<!-- Инициализировать Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Попробуйте сами »
Анализ примера
.accordionкласс иdata-accordionАтрибут используется для создания сворачиваемого элемента..accordion-navigationКласс используется для отображения сворачиваемых элементов. Фактическое содержимое находится в.contentВ классе (<div class="content"), нажатие кнопки отобразит его.
Мы добавляем к элементам списка<a>элемент для управления (показ/скрытие) сворачиваемым содержимым. Затем якорная ссылка использует тот же id, что и сворачиваемое содержимое (связано с <a href=#demo" и <div id="demo">).
Примечание:Для эффекта сворачивания требуется инициализация Foundation JS.
По умолчанию сворачиваемое содержимое скрыто. Мы можем сделать это с помощью<div>добавить в.activeкласса, чтобы сделать их видимыми по умолчанию:
Эффект аккордеона
Эффект аккордеона используется для развертывания и настройки сворачиваемого содержимого.
Эффект аккордеона создается с помощью нескольких разных якорных ссылок и идентификаторов:
Пример
<li class="accordion-navigation">
<a href="#demo">Пример аккордеона 1</a>
<div id="demo" class="content active">
Демо 1 - Пример руководства -- Обучение — это не только технологии, но и мечты!!!
</div>
</li>
<li class="accordion-navigation">
<a href="#demo2">Пример аккордеона 2</a>
<div id="demo2" class="content">
Демо 2 - Lorem ipsum dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3">Пример аккордеона 3</a>
<div id="demo3" class="content">
Демо 3 - Пример руководства -- Обучение — это не только технологии, но и мечты!!!
</div>
</li>
</ul>
Попробуйте сами »
По умолчанию один элемент списка аккордеона открыт. Если вы хотите закрыть их все, вы можете использоватьdata-options="multi_expand:true;"Свойство:
Пример
..
</ul>
Попробуйте сами »