CODEWITHSUNDEEP
htmlcsshtml-tag-details
pumpchief
pumpchief

Reputation: 19

Animating a <details> tag height using css & html only

Im trying to animate a <details> tag in html using only css. My approach is to do this by changing the value on a child div's grid-template-rows from 0fr to 1fr with the [open] selector.

For some reason the outcome of this seems to be very inconsistent. Sometimes when opening the details the animation plays properly, sometimes it doesn't. And it never works when closing.

What causes this inconsistent behavior? Is it possible to fix using only css & html?

details {
  font-family: arial;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: lightgray;
  border-radius: 3px;
  appearance: none;
}

summary {
  user-select: none;
  padding: 1em;
  cursor: pointer;
}

div {
  display: grid;
  transition: grid-template-rows 250ms;
}

details:not([open]) div {
  grid-template-rows: 0fr;
}

details[open] div {
  grid-template-rows: 1fr;
}

article {
  overflow: hidden;
  padding: 0 1em;
}
<body>
  <details>
    <summary>Lorem Ipsum</summary>
    <div>
      <article>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco              laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat..."
        </p>
        <p>
          "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque                  laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
           sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione                  voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor..."
        </p>
        <p>
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium                  voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati              cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
           animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita                    distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo            minus id quod maxime placeat facere possimus, omnis voluptas assumenda..."
        </p>
      </article>
    </div>
  </details>
</body>

Upvotes: 0

Views: 689

Answers (0)

Related Questions