如何创建：可折叠内容/手风琴

Opi, miten luodaan akustinen paneeli (laitettu sisältö).

Akustinen paneeli

Kun haluat vaihtaa suuren määrän sisällön piilottamisen ja näyttämisen välillä, akustinen paneeli on erittäin hyödyllinen:

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.

Kokeile itse

Luo akustinen paneeli

Ensimmäinen vaihe - lisää HTML:

<button class="accordion">Osio 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Osio 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Osio 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Toinen vaihe - lisää CSS:

Aseta akustisen paneelin tyylejä

/* Aseta painikkeen tyylejä, jota käytetään avataksesi ja sulkeaksesi akustinen paneeli */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Jos painiketta painetaan (lisää .active-luokka JavaScriptilla), lisää sille taustaväri sekä kun hiiren osoitin on päällä (hiiren osoitin) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Lisää akustinen paneeli tyyleille. Huomaa: oletuksena se on piilotettu */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Kolmas vaihe - lisää JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Vaihda lisäämään ja poistamaan "active"-luokka korostaaksesi ohjauspainikkeita */
    this.classList.toggle("active");
    /* Vaihda piilotettu ja näkyvä toiminta-alue */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Kokeile itse

动画手风琴（向下滑动）

要制作动画手风琴，请向面板类添加 max-height: 0、overflow: hidden 以及 max-height 属性的过渡效果。

然后，使用 JavaScript 根据不同屏幕尺寸的面板高度来计算并设置 max-height，以实现内容的向下滑动效果：

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

Kokeile itse

添加图标

在每个按钮上添加一个符号，以指示可折叠内容是否打开或关闭：

.accordion:after {
  content: '\02795'; /* "加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "减号”（-）的 Unicode 字符 */
}

Kokeile itse