аккордеон
Аккордеон используется, чтобы показать (и скрыть) содержание, которое разбивается на разделы.
Нажмите на кнопку "Открыть Раздел" ниже, чтобы увидеть, как это работает:
Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.
Аккордеон с фотографиями:
Язык Тролля, Норвегия
Класс w3-гармошка определяет гармошку, а класс W3-гармошки контента определяет часть будет отображаться:
пример
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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. раскрывающийся
В списке ниже показана разница между гармошкой и выпадающего списка:
Аккордеоны
Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.
- Содержимое 100% в ширину (охватывает всю ширину родительского элемента)
- При открытии, он толкает содержимое страницы вниз, если таковые имеются (позиция: относительная)
- Часто используется для "открытых" несколько разделов
Аккордеон Кнопки
Вы можете использовать любой HTML элемент, чтобы открыть содержимое аккордеона. Мы предпочитаем кнопку с классом W3-БТН-блок, поскольку она охватывает всю ширину родительского элемента, так же как и содержание аккордеона (ширина 100%). Помните, что кнопки в W3.CSS сосредоточены по умолчанию. Используйте класс W3-выравнивания влево , если вы хотите , чтобы они выровнен по левому краю вместо этого. Тем не менее, вы не должны следовать нашему подходу - аккордеон будет хорошо выглядеть в любом случае:
Lorem Ipsum ...
Lorem Ipsum ...
Сосредоточенный содержание, как хорошо!
пример
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>Активные кнопки аккордеона
чтобы выделить аккордеоны, которые открыты (нажал на) С помощью JavaScript:
Какой-то текст ..
Другой текст ..
пример
// 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 свойство контейнера w3-гармошку:
Какой-то текст ..
Какой-то текст ..
Какой-то текст ..
Какой-то текст ..
пример
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>Аккордеон Содержание
Аккордеон со ссылками:
пример
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Аккордеон как карты со списками:
- Джил
- Ева
- Адам
пример
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Аккордеон внутри Sidenav(Примечание: вы узнаете больше о побочных навигаций позже):
пример
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>Анимационные Аккордеоны
Используйте любой из классов W3-animate- исчезать, увеличения или слайд в содержании аккордеона: