CSS reverse animation

by Aljaz_code

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="wrapper">
  <div id="details" class="closeclass">
    <summary> I am awesome</summary>
    <p> Hi there this is an awesome paragraph </p>
    </div>
</div>

CSS

html {
  height: 100vh;
}

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

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

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

#details {
  cursor: pointer;
}

p {
  margin-top: 15px;
  transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  opacity: 1;
}

#details summary::before {
  content: '\25BC'; /* code for black triangle */
}

#details.closeclass summary::before {
  content: '\25B6';
}

#details.closeclass > p {
  margin-top: -20px; /* Previously set to -50px */
  opacity: 0;
}

JavaScript

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