Nasıl oluşturulur: Katlanabilir içerik/akordeon

Akordiyon nasıl oluşturulur (katlanabilir içerik) öğrenin。

Akordiyon

Bir çok içerik arasında gizlemek ve göstermek arasında geçiş yapmak istediğinizde, akordiyon oldukça kullanışlıdır：

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.

Try it yourself

Akordiyon oluşturun

İlk adım - HTML ekleyin：

<button class="accordion">Bölüm 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Bölüm 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Bölüm 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

İkinci adım - CSS ekleyin：

Akordiyonun stillerini ayarlayın

/* Akordiyon panellerini açmak ve kapatmak için kullanılan düğmelerin stillerini ayarlayın */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Düğme tıklanırsa (JS ile .active sınıfı eklenir) arka plan rengi ekleyin ve fare işlevi üzerine gelindiğinde (fare işlevi) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Akordiyon panellerine stil ekleyin. Dikkat: varsayılan olarak gizlidir */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Üçüncü adım - JavaScript ekleyin：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* "active" sınıfını ekleyip kaldırmak için değiştir, böylece kontrol paneli düğmelerini vurgulamak için */
    this.classList.toggle("active");
    /* Geçici panelleri gizlemek ve göstermek için değiştir */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {}}
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Try it yourself

Animasyonlu elyaf akor (aşağı kayma)

Animasyonlu elyaf akorunu yapmak için, panel sınıfına: max-height: 0veoverflow: hidden ve max-height geçiş etkisi özelliği.

Ardından, farklı ekran boyutlarına göre panel yüksekliğini hesaplayıp ayarlamak için JavaScript kullanın: max-heightİçeriğin aşağı kayma etkisini elde etmek için:

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

Try it yourself

İkon ekle

Her düğmeye bir simge ekleyin, bu da katlanabilir içeriğin açık mı kapalı mı olduğunu gösterir:

.accordion:after {
  content: '\02795'; /* "ekle" (+) karakterinin Unicode kodu */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "çarpıcı" (−) karakterinin Unicode kodu */
}

Try it yourself