Fisarmonica
Una fisarmonica viene usato per mostrare (o nascondere) il contenuto che viene suddiviso in sezioni.
Fare clic sui pulsanti "Open Sezione" qui sotto per vedere come funziona:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
Fisarmonica con le immagini:
Trolltunga, Norvegia
La classe w3-fisarmonica definisce una fisarmonica, e la classe w3-fisarmonica-contenuti definisce la parte da visualizzare:
Esempio
<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>Sia l'elemento che viene utilizzato per aprire la fisarmonica e il contenuto della fisarmonica può essere qualsiasi elemento HTML.
Fisarmonica vs. discesa
L'elenco che segue mostra la differenza tra una fisarmonica e un menu a discesa:
Fisarmoniche
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
- Il contenuto è largo 100% (copre l'intera larghezza dell'elemento genitore)
- Una volta aperto, si spinge il contenuto della pagina verso il basso, se del caso (position: relative)
- Spesso utilizzato per "aprire" più sezioni
menu a discesa
- Contenuti è minima 160px di larghezza e più se necessario
- Una volta aperto, si pone sopra il contenuto della pagina (position: absolute)
- Spesso utilizzato per "aprire" una sezione
Pulsanti di fisarmonica
È possibile utilizzare qualsiasi elemento HTML per aprire il contenuto della fisarmonica. Noi preferiamo un pulsante con una classe w3-btn-block, perché copre l'intera larghezza del suo elemento genitore, proprio come il contenuto fisarmonica (larghezza 100%). Ricordate che i pulsanti di W3.CSS sono centrate per impostazione predefinita. Utilizzare la classe w3-sinistra-align se si vuole che allineato a sinistra, invece. Tuttavia, non c'è bisogno di seguire il nostro approccio - una fisarmonica che starà bene in entrambi i casi:
Lorem ipsum ...
Lorem ipsum ...
Centrato contenuti, come pure!
Esempio
<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>Pulsanti fisarmonica attivi
Utilizzare JavaScript per evidenziare fisarmoniche che sono aperti (cliccato):
Del testo ..
Qualche altro testo ..
Esempio
// 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", "");
}Larghezza di fisarmonica
Per impostazione predefinita, la larghezza di una fisarmonica è al 100%. Per ignorare questo, cambiare la proprietà width CSS del contenitore w3-fisarmonica:
Del testo ..
Del testo ..
Del testo ..
Del testo ..
Esempio
<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>Fisarmonica contenuti
Fisarmonica con i link:
Esempio
<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>Fisarmonica come una scheda con le liste:
- Jill
- vigilia
- Adamo
Esempio
<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>Fisarmonica all'interno di un Sidenav(Nota: si impara di più su navigazioni laterali più avanti):
Esempio
<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>Fisarmoniche animati
Utilizzare una delle classi w3-animate- a svanire, lo zoom o scivolare nel contenuto della fisarmonica: