Come creare: effetto pieghevole

Impara come creare parti ripiegabili.

Effetto pieghevole

Clicca su questo pulsante per passare tra la visualizzazione e la nascita del contenuto pieghevole.

Alcuni contenuti pieghevoli. Clicca sul pulsante per commutare tra mostrare e nascondere i contenuti pieghevoli. 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.

Prova personalmente

Crea l'effetto parte pieghevole

Primo passo - Aggiungi HTML:

<button type="button" class="collapsible">Apri Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Secondo passo - Aggiungi CSS:

Imposta lo stile del pianoforte:

/* Imposta lo stile del pulsante per aprire e chiudere il contenuto ripiegabile */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Aggiungi colore di sfondo al pulsante quando viene cliccato e quando il mouse è sopra il pulsante (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Imposta lo stile del contenuto ripiegabile. Attenzione: nascosto per default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Terzo passo - Aggiungi JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Prova personalmente

Animated collapse effect (scroll down)

To create an animated collapse effect, please add max-height: 0,overflow: hide and max-height property transition to the panel class.

Then, use JavaScript to add the calculated max-height To scroll down the content, depending on the height of the panel on different screen sizes:

Example

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

Prova personalmente

Add icon

Add a symbol to each button to indicate whether the collapsible content is open or closed:

Example

.collapsible:after {
  content: '\02795'; /* Represents the Unicode character for 'plus' (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* Represents the Unicode character for 'minus' (-) */
}

Prova personalmente