Akkordeon mit HTML-<details>-Tag animieren

Fast sind alle Browser mit dabei – nur bei Firefox springt das details-Element noch.

Φ

Der Goldene Schnitt

Der goldene Schnitt bezeichnet das Teilungsverhältnis einer Strecke oder anderen Größe, bei dem das Verhältnis des Ganzen zu seinem größeren Teil dem des größeren Teils zum kleineren Teil entspricht.

📚

Euklid

Die 13 Bücher der Elemente, in denen Euklid wunderbare Wahrheiten zur Geometrie und Zahlentheorie darlegt, hatten einen unschätzbaren Einfluss auf die Zivilisation.

📐

Trigonometrie

Die Trigonometrie untersucht die Beziehung zwischen den Winkeln und Seitenlängen eines Dreiecks und ist für die moderne Wissenschaft von zentraler Bedeutung.

Man beachte das name-Attribut in den öffnenden details-Tags! Bei input type=“radio“ verbindet das gemeinsame name-Attribut die zusammengehörenden Radio-Button, in <details> verbindet es die details-Elemente: So ist immer nur ein details-Element geöffnet, ohne dass JavaScript einschreiten muss.

<details name="accordion" id="golden" open>
      <summary>
        <span>Φ</span>
        <img src="goldener-schnitt.svg" width="1294" height="1544">
      </summary>
      <div class="details-content-wrapper">
        <h3>Der Goldene Schnitt</h3>
        <p>Der goldene Schnitt bezeichnet das Teilungsverhältnis einer Strecke oder anderen Größe, bei dem das Verhältnis des Ganzen zu seinem größeren Teil dem des größeren Teils zum kleineren Teil entspricht.</p>
      </div>
</details>

<details name="accordion" id="euklid">
      <summary>…</summary>
      <div class="details-content-wrapper"></div>
</details>

<details name="accordion" id="trigometrie">
      <summary>…</summary>
      <div class="details-content-wrapper">…</div>
</details>

.accordion-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: min-content;
  margin: 0 auto;
}

details {
  display: flex;
  flex-direction: row;
  background: transparent;
  color: white;
  margin-bottom: 3rem;
  height: 20rem;
  border-radius: 2rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
  
  --open-size: min(36vw, 260px);
  
  summary img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: filter 0.5s ease;
  }

  & [open] summary img {
    filter: brightness(0.7);
  }
  
   & [open] summary {
   	background: hsla(0,0%,0%,0.5);
   }
  
  summary {
    padding: 1rem 0.5em;
    width: 4rem;
    flex-shrink: 0;
    background: hsla(50,90%,90%,1);
    
    & span {
      display: grid;
      place-content: center;
      width:40px;
      height: 40px;
      border-radius: 50%;
      background: rgb(0 0 0 / 0.25);
    }
    
    &:focus {
      outline: none;
    }
  }
  
  .details-content-wrapper {
    padding: 1.5rem 0.5em;
    width: var(--open-size);
    background: hsla(0,0%,0%,0.5);
    height: 320px;
  }
  
  &:hover, &:has(summary:focus) {
    outline: 3px solid cornflowerblue;
    outline-offset: 3px;
  }
}

.details-content-wrapper {
  /* margin unten und oben eliminieren */
  :first-child { margin-top: 0; }
  :last-child { margin-bottom: 0; }
  
  /* Text beim Öffnen animieren */
  p {
    transform: translateY(2rem);
    opacity: 0;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
  }
  
  [open] & p {
    transform: none;
    opacity: 1;
    padding-right: 1rem;
    font-size: 0.96rem;
    transition-delay: 0.5s;
  }
}

/* Animation */
::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: var(--open-size);
}