Ku hanyan: fariya yin a hanyan.

Kaifiyarin hada hanyan yin a hanyan dake fariya.

Collapsible effect

Clicking this button will toggle between showing and hiding the collapsible content.

Some collapsible content. Click the button to toggle between showing and hiding the collapsible 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.

Tun dace

Kafa kammala dake yi ayyuka yi yi girmawa

Kara 1 - Ci gaba HTML:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Kara 2 - Ci gaba CSS:

Girmawa fassararun accordion:

/* Rarrabawuwarin fassararun dake girmawa na butun kiya na a koyi ko girmawa da kuma a koyi ko girmawa */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Idan butun bace koyi ko koyi, kuma idan a koyi ko tsa kiya, rarrabawuwarin fassararun dake yi girmawa (ci gaba .active) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Rarrabawuwarin fassararun dake girmawa. Kama: Anfaniya a yi girmawa */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Kara 3 - Ci gaba JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Tun dace

带动画的折叠效果（向下滑动）

要创建一个带动画的折叠效果，请将 max-height: 0、overflow: hide 以及 max-height 属性的过渡添加到面板类中。

然后，使用 JavaScript 通过设置计算出的 max-height 来向下滑动内容，具体取决于面板在不同屏幕尺寸上的高度：

实例

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

Tun dace

添加图标

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

实例

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

Tun dace