W3.CSS Аккордеоны
Нажмите на кнопку «Открыть раздел» ниже, чтобы увидеть, как работают аккордеоны:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Аккордеон с изображениями:
Французские Альпы
Аккордеон
Аккордеон используется для отображения (и скрытия) содержимого HTML.
Используйте класс w3-hide чтобы скрыть содержание аккордеона.
Используйте любую кнопку, чтобы открыть и закрыть содержимое:
Пример
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Открыть раздел 1</button>
<div id="Demo1" class="w3-container w3-hide">
<p>Какой-то текст..</p>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
И элемент, который используется для открытия аккордеона, и контент аккордеона могут быть любым элементом HTML.
Аккордеон vs. Dropdown
Эта таблица показывает разницу между аккордеоном и выпадающим элементом:
| Аккордеон | Dropdown |
|---|---|
| Контент выталкивает содержимое страницы вниз | Контент лежит поверх существующего контента страницы |
| Содержание часто составляет 100% | Контент шириной 160px (по умолчанию) |
| Часто используется для открытия нескольких разделов | Часто используется для открытия одного раздела |
Аккордеоны
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Выпадающие элементы
Аккордеонные Кнопки
Вы можете использовать любой элемент HTML, чтобы открыть содержание аккордеона. Мы предпочитаем кнопку с классом w3-block, чтобы охватить всю ширину страницы (ширина 100%).
Помните, что кнопки в W3.CSS центрированы по умолчанию. Используйте класс w3-left-align, если хотите, чтобы они были выровнены по левому краю. Тем не менее, вы не должны обязательно следовать нашему подходу - аккордеон будет хорошо выглядеть в любом случае:
Lorem ipsum...
Lorem ipsum...
Контент центрирован также!
Пример
<button onclick="myFunc('Demo1')"
class="w3-button">
Обычная кнопка</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Выровненный слева и на всю ширину</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
По центру и на всю ширину</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Контент центрирован также!!</p>
</div>
Активные Аккордеонные Кнопки
Используйте JavaScript, чтобы выделить открытые (кликнутые) аккордеоны:
Какой-то текст..
Какой-то другой текст..
Пример
// Добавьте класс w3-red ко всем открытым аккордеонам
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
Ширина Аккордеона
По умолчанию ширина блока составляет 100%. Чтобы переопределить это, измените CSS свойство width контейнера accordion:
Какой-то текст..
Какой-то текст..
Какой-то текст..
Какой-то текст..
Пример
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Содержимое аккордеона
Аккордеон со ссылками:
Пример
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Аккордеон</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Ссылка 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Ссылка 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Ссылка 3</a>
</div>
Аккордеон как список:
- Jill
- Eve
- Adam
Пример
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Аккордеон</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Аккордеон внутри боковой панели (вы узнаете больше о боковых панелях позже в этом учебнике):
Пример
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Ссылка 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Аккордеон</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Ссылка</a>
<a href="#"
class="w3-bar-item w3-button">Ссылка</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Ссылка</a>
<a href="#"
class="w3-bar-item w3-button">Ссылка</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Ссылка 2</a>
<a href="#"
class="w3-bar-item w3-button">Ссылка 3</a>
</div>
Анимированные Аккордеоны
Используйте любой из w3-animate-классов для плавного появления, увеличения или скольжения содержимого аккордеона:
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
