Πώς να δημιουργήσετε: Πλαστικό περιεχόμενο/Ακουστικό όργανο

Μάθετε πώς να δημιουργήσετε ακορντεόν (κατεβατό περιεχόμενο).

Ακορντεόν

Το ακορντεόν είναι πολύ χρήσιμο όταν θέλετε να μεταβείτε από κρυφή σε εμφανής κατάσταση για μεγάλο όγκο περιεχομένου:

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.

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.

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.

Δοκιμάστε το προσωπικά

Δημιουργία ακορντεόν

Πρώτο βήμα - Προσθήκη HTML:

<button class="accordion">Τμήμα 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Τμήμα 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Τμήμα 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Δεύτερο βήμα - Προσθήκη CSS:

Ορισμός στυλ για το ακορντεόν

/* Ορισμός στυλ για το κουμπί που ανοίγει και κλείνει το πίνακα ακορντεόν */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Αν το κουμπί πατηθεί ( προσθήκη κλάσης .active με JavaScript), προσθέστε χρώμα υποβάθρου και όταν το ποντίκι βρίσκεται πάνω του (παραμονή) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Προσθήκη στυλ στο πίνακα ακορντεόν. Προσοχή: η προεπιλεγμένη κατάσταση είναι κρυφή */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Τρίτο βήμα - Προσθήκη JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Αλλαγή προσθήκης και διαγραφής της κλάσης "active" για τον υπογράμμιση των κουμπιών πύλης ελέγχου */
    this.classList.toggle("active");
    /* Κλείσιμο και εμφάνιση ενεργής πύλης */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Δοκιμάστε το προσωπικά

Animated accordion (slide down)

To create an animated accordion, add max-height: 0,overflow: hidden and max-height property transition effect.

Then, use JavaScript to calculate and set the panel height according to different screen sizes: max-heightto achieve the sliding effect of the content downwards:

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

Δοκιμάστε το προσωπικά

Add icon

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

.accordion:after {
  content: '\02795'; /* "\3556\3556\3556\3556" (plus sign) Unicode character */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "\3556\3556\3556\3556" (minus sign) Unicode character */
}

Δοκιμάστε το προσωπικά