Bagaimana Membuat: Konten yang dapat terbuka/akordeon

Learn how to create an accordion (collapsible content).

Accordion

Accordion is very useful when you want to switch between hiding and showing a large amount of content:

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.

Coba sendiri

Create accordion

Step 1 - Add HTML:

<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>

Step 2 - Add CSS:

Set accordion style

/* Set style for the button used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* If the button is clicked (add .active class using JS), add background color and when the mouse hovers over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Add style to the accordion panel. Note: It is hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Step 3 - Add JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle add and delete "active" class to highlight the control panel button */
    this.classList.toggle("active");
    /* Toggle hide and show activity panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Coba sendiri

animasi alat musik angin (penurunan ke bawah)

Untuk membuat animasi alat musik angin, tambahkan max-height: 0,overflow: hidden dan max-height property transition effect.

kemudian, gunakan JavaScript untuk menghitung dan mengatur ketinggian panel berdasarkan ukuran layar yang berbeda max-heightuntuk mencapai efek penurunan konten:

<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>

Coba sendiri

Add icon

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

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

Coba sendiri