Fisarmoniche W3.CSS
Fai clic sui pulsanti "Apri sezione" qui sotto per vedere come funzionano le fisarmoniche:
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
Fisarmonica
Una fisarmonica viene utilizzata per mostrare (e nascondere) il contenuto HTML.
Usa la classe w3-hide per nascondere il contenuto della fisarmonica.
Utilizzare qualsiasi tipo di pulsante per aprire e chiudere il contenuto:
Esempio
<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>
Sia l'elemento utilizzato per aprire la fisarmonica che il contenuto della fisarmonica possono essere qualsiasi elemento HTML.
Fisarmonica vs. Dropdown
Questa tabella mostra la differenza tra una fisarmonica e un menu a discesa:
| Fisarmonica | Cadere in picchiata |
|---|---|
| Il contenuto spinge il contenuto della pagina verso il basso | Il contenuto si sovrappone al contenuto della pagina esistente |
| Il contenuto è spesso ampio al 100%. | Il contenuto è largo 160 px (impostazione predefinita) |
| Spesso utilizzato per aprire più sezioni | Spesso utilizzato per aprire una sezione |
Fisarmoniche
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.
Dropdown
Pulsanti di fisarmonica
È possibile utilizzare qualsiasi elemento HTML per aprire il contenuto della fisarmonica. Preferiamo un pulsante con una classe w3-block , per coprire l'intera larghezza della pagina (100% di larghezza).
Ricorda che i pulsanti in W3.CSS sono centrati per impostazione predefinita. Usa la classe w3-left-align se vuoi invece che siano allineati a sinistra. Tuttavia, non devi seguire il nostro approccio: una fisarmonica starà bene in entrambi i casi:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Esempio
<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>
Pulsanti a fisarmonica attivi
Usa JavaScript per evidenziare le fisarmoniche aperte (cliccando su):
Some text..
Some other text..
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 fisarmonica
Per impostazione predefinita, la larghezza del blocco è 100%. Per ignorarlo, cambia la proprietà della larghezza CSS del contenitore della fisarmonica:
Some text..
Some text..
Some text..
Some text..
Esempio
<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>
Contenuto di fisarmonica
Fisarmonica con link:
Esempio
<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>
Fisarmonica come elenco:
- Jill
- vigilia
- Adamo
Esempio
<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>
Fisarmonica all'interno di una barra laterale (imparerai di più sulle barre laterali più avanti):
Esempio
<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>
Fisarmoniche animate
Usa una delle classi w3-animate- per sfumare, ingrandire o far scorrere il contenuto della fisarmonica:
Esempio
<div id="Demo1" class="w3-hide
w3-animate-zoom">