Question

0

187

Views

Animate component in tag 'details'

HTML:

.main-summary:before {
  content    : "+";
  font-size  : 2em;
  padding    : 0 0.5em;
  display    : inline-block;
  transition : .5s;
  color      : grey;
  transform  : rotate(0deg);
  }
summary:after {
  padding     : 0px .5em;
  text-align  : right;
  float       : right;
  display     : inline-block;
  content     : "∨";
  font-size   : .7em;
  transition  : .5s;
  width       : 90%;
  font-weight : 700;
  }

<details>
  <summary class="main-summary">
    <p>Main summary</p>
  </summary>
  <details>
    <summary>
      <p>Text in summary</p>
    </summary>
    <p>123</p>
  </details>
</details>

How can I make an animation for the main <details> tag so that the + sign 1 image flips over and becomes the closing icon X 2 image, and the ∨ at the end of <details> turned over and became an up arrow 3 image, but this is only for the open element, and not for all that are in the open tag.

1 image:
2 image:
3 image:

about 4 years ago · Santiago Trujillo

Answer question

0

187

Animate component in tag 'details'

Find remote jobs

Andres GPT