Koyiwa: Content that folds / Accordion

Ɗaɗa ƙirƙira ƙaƙƙarar ƙanamici (ƙaƙƙarar ƙanamici da yana ƙaƙƙarar ƙanamici).

ƙirƙira ƙaƙƙarar ƙanamici

Ƙarɗa na 1 - ƙara 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>

Ƙarɗa na 2 - ƙara CSS:

ƙarɗa wanda ke sa ido ƙaƙƙarar ƙanamici ƙaƙƙarar ƙanamici

/* ƙarɗa wanda ke sa ido ƙaƙƙarar ƙanamici ƙarɗa ƙaƙƙarar ƙanamici ƙarɗa ƙaƙƙarar ƙanamici */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* ƙarɗa wanda ke sa ido ƙaƙƙarar ƙanamici ƙarɗa ƙaƙƙarar ƙanamici yana ƙirƙira ƙaƙƙarar ƙanamici, kuma ƙarɗa ƙaƙƙarar ƙanamici yana sa ido ƙaƙƙarar ƙanamici (yana ƙirƙira ƙaƙƙarar ƙanamici da .active ƙarɗa ƙaƙƙarar ƙanamici) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* ƙarɗa wanda ke sa ido ƙaƙƙarar ƙanamici ƙaƙƙarar ƙaƙƙarar ƙanamici. Ƙashe: ana ƙaƙƙarar ƙaƙƙarar ƙanamici daga baya */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Ƙarɗa na 3 - ƙara JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* ƙarɗa wanda ke sa ido ƙaƙƙarar ƙoƙari da ƙarɗa ƙaƙƙarar "active" yana ƙirƙira ƙoƙarin sa ido ƙaƙƙarar ƙanamici */
    this.classList.toggle("active");
    /* ƙarɗa wanda ke sa ido ƙaƙƙarar kudu da ƙaƙƙarar ƙanamici */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

亲自试一试

动画手风琴（向下滑动）

要制作动画手风琴，请向面板类添加 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>

亲自试一试

添加图标

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

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

亲自试一试