0

I have a simple accordion and I'd like it to have a smooth scroll and fade in the text when expanding.

I'm almost there with this (see Codepen), however the keyframe animation only runs on first click. Could someone explain to me why this is? Do I need to use JS to check for the click to re-run the animation?

Is there a simpler way to do the text fade in with just CSS?

Thanks in advance for your time.

@keyframes fadeIn1 {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}

details {
  padding: 10px;
  border-bottom: 1px solid;
}

details summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details div {
  opacity: 0;
}

details[open] summary {
  margin-bottom: 10px;
}

details[open] div {
  animation-duration: 1s;
  animation-name: fadeIn1;
  animation-timing-function: ease-in;
  opacity: 1;
}
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
user2498890
  • 1,528
  • 4
  • 25
  • 58
  • Have you looked at this question? https://stackoverflow.com/questions/6268508/restart-animation-in-css3-any-better-way-than-removing-the-element – Jonathan Rys Sep 27 '22 at 12:03
  • why not use a transition instead of a keyframes? – Pete Sep 27 '22 at 12:08
  • @Pete The keyframe animation works but only on first click and it seems like overkill to use JS to check for further clicks? I have tried using a simple transition but couldn't get it to work. For some reason as simple transition on the opacity of div didn't apply. Any ideas why this might be? - See this codpen - https://codepen.io/spring_dp/pen/jOxYZRJ?editors=1100 – user2498890 Sep 27 '22 at 12:11
  • That's so weird - if you inspect the div and then try open the details, the transition works, but it doesn't otherwise – Pete Sep 27 '22 at 12:36
  • I know I've been going round in circles with it and can't workout why there is an issue. – user2498890 Sep 27 '22 at 12:37
  • There is no way to do it only with CSS, when you click on `details` while it is `open` it became immediately `:not([open])`, so animations are useless, you need JavaScript to deal with this behavior, as done [here](https://css-tricks.com/how-to-animate-the-details-element/) for example. – n-- Sep 27 '22 at 12:50

0 Answers0