Imparare a creare una fisarmonica (collapsible content) .
Fisarmonica
Fisarmoniche sono utili quando si desidera passare da nascondere e mostrare grande quantità di contenuti:
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.
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.
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.
Creare una fisarmonica
Fase 1) Aggiungere HTML:
Esempio
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>
<button class="accordion">Section
2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>Punto 2) Aggiungere CSS:
Lo stile della fisarmonica:
Esempio
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
/* Style the accordion panel. Note:
hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
display: none;
}
/* The "show" class is added to the
accordion panel when the user clicks on one of the buttons. This
will show the panel content */
div.panel.show {
display: block !important;
}Fase 3) Aggiungi JavaScript:
Esempio
/* Toggle between adding and removing the
"active" and "show" classes when the user clicks on one of the
"Section"
buttons. The "active" class is used to add a background color to the
current button when its belonging panel is open. The "show" class is used to open the
specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick =
function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
} Prova tu stesso " Fisarmonica animate
Apportare le seguenti modifiche ai panel e show classi, per fare una fisarmonica animato.
Questo renderà la diapositiva fisarmonica verso il basso (max-height) e fade in (opacity) :
Esempio
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition:
0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height:
500px; /* Whatever you like, as long as its more than the height of the
content (on all screen sizes) */
}
Prova tu stesso " Aggiungere icone
Aggiungere un simbolo a ogni pulsante per indicare se il contenuto pieghevole è aperto o chiuso:
Esempio
button.accordion:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}
Prova tu stesso "