Jak tworzyć: zawartość związaną / akordeon

Naucz się, jak tworzyć akordeony (zwijane zawartość).

Akordeon

Akordeon jest bardzo użyteczny, gdy chcesz przełączać między ukrywanym i wyświetlanym dużym ilościem treści:

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.

Spróbuj sam

Stwórz akordeon

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

Ustaw styl akordeonu

/* Ustaw styl przycisków używanych do otwierania i zamykania panelu akordeonu */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Jeśli przycisk został kliknięty (dodaj klasę .active za pomocą JS), dodaj kolor tła oraz, gdy mysz jest nad nim (nadmiar) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Dodaj styl do panelu akordeonu. Uwaga: domyślnie jest ukryty */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Krok 3 - Dodaj JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Przełączanie dodawania i usuwania klasy "active", aby wyróżnić przyciski panelu kontrolnego */
    this.classList.toggle("active");
    /* Przełączanie ukrywania i wyświetlania aktywnego panelu */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Spróbuj sam

Animated accordion (slide down)

To create an animated accordion, add max-height: 0,overflow: hidden and max-height transition effect.

Then, use JavaScript to calculate and set the panel height according to different screen sizes: max-heightTo achieve the sliding effect of the content, add:

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

Spróbuj sam

Add icon

Add a symbol to each button to indicate whether the collapsible content is open or closed:

.accordion:after {
  content: '\02795'; /* "Plus" (+) Unicode character */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "Minus" (\u2212) Unicode character */
}

Spróbuj sam