Аккордеоны 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.
Accordion with Images:
French Alps
Аккордеон
Аккордеон используется для отображения (и скрытия) содержимого HTML.
Используйте класс w3-hide , чтобы скрыть содержимое аккордеона.
Используйте любую кнопку, чтобы открывать и закрывать содержимое:
Пример
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</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...
Centered content as well!
Пример
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal 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">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Активные кнопки-гармошки
Используйте JavaScript, чтобы выделить аккордеоны, которые открыты (нажаты):
Some text..
Some other text..
Пример
// Add the w3-red class to all opened accordions
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 контейнера аккордеона:
Some text..
Some text..
Some text..
Some text..
Пример
<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">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Аккордеон в виде списка:
- Джилл
- канун
- Адам
Пример
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</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">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</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">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
Анимированные аккордеоны
Используйте любой из классов w3-animate- для плавного изменения, масштабирования или скольжения содержимого аккордеона:
Пример
<div id="Demo1" class="w3-hide
w3-animate-zoom">