0

Hello I was trying to reverse an animation of details and summary. I am able to animate when details is open, when i click again didn't animate in reverse. How to make the animation work when I click summary again? Thank you. This is my HTML code and CSS

HTML

<details>
  <summary>I am awesome</summary>
  <p>Hi there this is an awesome paragraph</p>
</details>

CSS

html {
  height: 100vh;
}

body {
  height: 100%;
  display: grid;
  place-content: center;

  font-family: 'Montserrat', sans-serif;
}

details {
  background: mistyrose;
  padding: 4em;
  width: 20rem;
}

details:not(open) summary~* {
  animation: anim-rev .5s ease-in;
}

details[open] summary~* {
  animation: anim .5s ease-in;
}

@keyframes anim {
  0% {
    opacity: 0;
    margin-top: -50px;
  }

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

@keyframes anim-rev {
  0% {
    opacity: 1;
    margin-left: 0;
  }

  100% {
    opacity: 0;
    margin-top: -50px;
  }
}
flyingduck92
  • 1,449
  • 2
  • 23
  • 39
  • Does this answer your question? [Transitioning between open close in details element](https://stackoverflow.com/questions/17301282/transitioning-between-open-close-in-details-element) – alotropico Oct 01 '20 at 06:08
  • @alotropico that's not an answer I'm looking for. Have you try my code? My code is able to animate when details has open attribute. What am I looking for is to reverse the animation when details clicked again – flyingduck92 Oct 01 '20 at 06:38

1 Answers1

0

Seems like 'details' element has some limitations, I was unable to do the close animations properly with such element.

Instead I used a bit JQuery and made a div with an ID. You can check the working code below: (I modified your code as little as possible)

https://jsfiddle.net/Aljaz_code/265f0nkb/1/

JQuery code used:

$(document).ready(function(){
    $("#details").click(function(){
        $("#details").toggleClass("closeclass");
    });
});

Symbol for the triangle

content: "\25BC";

Displays a pointing cursor before clicking

cursor: pointer;
aljaz-code
  • 223
  • 2
  • 10