Akordeon
Akordeon służy do wyświetlania (ukryć) treści, które są podzielone na sekcje.
Kliknij na "otwartą sekcję" przyciski poniżej, aby zobaczyć jak to działa:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nie 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.
Akordeon z obrazami:
Trolltunga w Norwegii
Klasa w3-akordeon definiuje akordeonie, a klasa W3-akordeon-content definiuje część ma być wyświetlany:
Przykład
<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>Zarówno element, który jest używany do otwierania na akordeonie i treści akordeon może być dowolny element HTML.
Akordeon w porównaniu z rozwijanej
Poniższa lista przedstawia różnicę między akordeonu i rozwijanej:
Akordeony
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nie 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.
- Zawartość 100% szerokości (rozciąga się przez całą szerokość elementu nadrzędnego)
- Po otwarciu, to wypycha zawartość strony w dół, jeśli w ogóle (position: relative)
- Często używany do "open" wiele sekcji
akordeon Przyciski
Można użyć dowolnego elementu HTML, aby otworzyć zawartość akordeon. Wolimy przycisku z klasą w3-btn-block, ponieważ rozciąga się na całą szerokość elementu rodzica, podobnie jak treść akordeonu (100% szerokości). Pamiętaj, że przyciski w W3.CSS skupiają się domyślnie. Użyj klasy W3-left-align jeśli chcesz je wyrównany do lewej zamiast. Jednak nie trzeba śledzić nasze podejście - akordeon będzie wyglądać dobrze w obu kierunkach:
Lorem ipsum ...
Lorem ipsum ...
Centered treści, jak również!
Przykład
<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>Całość Akordeon Przyciski
Użyj JavaScript, aby podświetlić akordeony, które są otwarte (kliknięciu):
Część tekstu ..
Jakiś inny tekst ..
Przykład
// 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", "");
}Akordeon Szerokość
Domyślnie szerokość akordeonu wynosi 100%. Aby to zastąpić, zmienić właściwości width CSS pojemnika w3-akordeon:
Część tekstu ..
Część tekstu ..
Część tekstu ..
Część tekstu ..
Przykład
<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>Akordeon treści
Akordeon z linkami:
Przykład
<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>Akordeon jako karta z listy:
- Jill
- Przeddzień
- Adam
Przykład
<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>Akordeon wewnątrz Sidenav(Uwaga: można dowiedzieć się więcej o nawigacje bocznych później):
Przykład
<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>animowane Akordeony
Użyj dowolnej klasy W3-animate- zanikać, powiększać lub slajd w treści akordeonu: