W3.CSS Akordeony
Kliknij poniższe przyciski „Otwórz sekcję”, aby zobaczyć, jak działają akordeony:
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
Akordeon
Akordeon służy do pokazywania (i ukrywania) treści HTML.
Użyj klasy w3-hide , aby ukryć zawartość akordeonu.
Użyj dowolnego przycisku, aby otworzyć i zamknąć zawartość:
Przykład
<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>
Zarówno element używany do otwierania akordeonu, jak i zawartość akordeonu może być dowolnym elementem HTML.
Akordeon kontra rozwijane
Ta tabela pokazuje różnicę między akordeonem a listą rozwijaną:
| Akordeon | Upuścić |
|---|---|
| Treść przesuwa zawartość strony w dół | Treść nakłada się na istniejącą treść strony |
| Treść jest często w 100% szeroka | Treść ma szerokość 160 pikseli (domyślnie) |
| Często używane do otwierania wielu sekcji | Często używany do otwierania jednej sekcji |
Akordeon
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.
Menu rozwijane
Przyciski akordeonowe
Możesz użyć dowolnego elementu HTML, aby otworzyć zawartość akordeonu. Preferujemy przycisk z klasą w3-block , aby obejmował całą szerokość strony (100% szerokości).
Pamiętaj, że przyciski w W3.CSS są domyślnie wyśrodkowane. Użyj klasy w3-left-align , jeśli chcesz, aby były wyrównane do lewej. Nie musisz jednak podążać za naszym podejściem - akordeon i tak będzie dobrze wyglądał:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Przykład
<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>
Aktywne przyciski akordeonowe
Użyj JavaScript, aby podświetlić otwarte akordeony (kliknięte):
Some text..
Some other text..
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", "");
}
Szerokość akordeonu
Domyślnie szerokość bloku wynosi 100%. Aby to zmienić, zmień właściwość CSS width kontenera harmonijki:
Some text..
Some text..
Some text..
Some text..
Przykład
<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>
Zawartość akordeonu
Akordeon z linkami:
Przykład
<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>
Akordeon jako lista:
- Jill
- przeddzień
- Adam
Przykład
<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>
Akordeon w pasku bocznym (więcej o paskach bocznych dowiesz się później):
Przykład
<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>
Animowane akordeony
Użyj dowolnej z klas w3-animate- do ściemniania, powiększania lub przesuwania zawartości akordeonu:
Przykład
<div id="Demo1" class="w3-hide
w3-animate-zoom">