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.
Акордеони та спадні списки
В цій таблиці показані відмінності між акордеоном та спадним списком:
| Акордеон | Спадний список |
|---|---|
| Вміст виштовхує вміст сторінки вниз | Вміст накладається на наявний вміст сторінки |
| Вміст часто має 100% ширину | Вміст має ширину 160 пікселів (за замовчуванням) |
| Часто використовується для відкриття кількох розділів | Часто використовується для відкриття одного розділу |
Акордеони
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 контейнера-акордеона:
Якийсь текст
Якийсь текст
Якийсь текст
Якийсь текст
Приклад
<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>Якийсь текст</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-класів, щоб згасати, масштабувати або ковзати вміст акордеона:
