Sådan oprette: Klapbare indhold/akordeon

Lær hvordan man opretter en akordeon (faldende indhold).

Akordeon

Akordeon er meget nyttigt, når du vil skifte mellem at skjule og vise meget indhold:

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.

Prøv selv

Opret akordeon

Første trin - Tilføj HTML:

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

Andet trin - Tilføj CSS:

Indstil akordeon stil

/* Sæt stil til knapperne, der bruges til at åbne og lukke akordeon panelet */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Tilføj baggrundsfarve, når knappen klikkes (tilføjet med JS .active klasse), og når musen hæves over den (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Tilføj stil til akordeon panel. Bemærk: Det er som standard skjult */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Tredje trin - Tilføj JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Skift mellem at tilføje og fjerne "active" klasse for at fremhæve kontrolpanelets knapper */
    this.classList.toggle("active");
    /* Skift mellem at skjule og vise aktiv panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Prøv selv

动画手风琴（向下滑动）

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

Prøv selv

添加图标

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

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

Prøv selv