Akordeony W3.CSS
Kliknutím na tlačítka "Otevřít sekci" níže uvidíte, jak akordeony fungují:
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 se používá k zobrazení (a skrytí) obsahu HTML.
Pomocí třídy w3-hide skryjte obsah akordeonu.
K otevření a zavření obsahu použijte jakékoli tlačítko:
Příklad
<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>
Jak prvek, který se používá k otevření harmoniky, tak obsah harmoniky může být libovolný HTML prvek.
Akordeon vs. Dropdown
Tato tabulka ukazuje rozdíl mezi akordeonem a rozevíracím seznamem:
| Akordeon | Rozbalovací nabídka |
|---|---|
| Obsah tlačí obsah stránky dolů | Obsah překrývá stávající obsah stránky |
| Obsah je často 100% široký | Obsah je široký 160 pixelů (výchozí) |
| Často se používá k otevření více sekcí | Často se používá k otevření jedné sekce |
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.
Rozbalovací seznamy
Tlačítka pro akordeon
K otevření obsahu akordeonu můžete použít jakýkoli prvek HTML. Preferujeme tlačítko s třídou w3-block , které zabírá celou šířku stránky (100% šířka).
Pamatujte, že tlačítka ve W3.CSS jsou ve výchozím nastavení vystředěna. Pokud je místo toho chcete zarovnat doleva, použijte třídu w3-left-align . Nemusíte se však řídit naším přístupem – akordeon bude vypadat dobře v obou směrech:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Příklad
<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>
Aktivní tlačítka pro akordeon
Použijte JavaScript ke zvýraznění otevřených akordeonů (kliknutí na):
Some text..
Some other text..
Příklad
// 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", "");
}
Šířka akordeonu
Ve výchozím nastavení je šířka bloku 100 %. Chcete-li to přepsat, změňte vlastnost CSS width kontejneru akordeonu:
Some text..
Some text..
Some text..
Some text..
Příklad
<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>
Obsah akordeonu
Akordeon s odkazy:
Příklad
<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 seznam:
- Jill
- Předvečer
- Adame
Příklad
<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 uvnitř postranního panelu (více o postranních panelech se dozvíte později):
Příklad
<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>
Animované akordeony
Použijte kteroukoli z tříd w3-animate- k vyblednutí, přiblížení nebo posunutí obsahu akordeonu:
Příklad
<div id="Demo1" class="w3-hide
w3-animate-zoom">