skip navigation

Animated Details

Tagged in: animation
Grouped in: animation

So this solution, to make the HTML details element animated comes from a post on dev.to by Gustavo Alexandrino.

Check this out..

Whooah!! Below is how to make this happen.

Interestingly the max-height value appears to affect the speed of the transition. The lower the max-height is the slower the transition. So the transition times need to be adjusted according to what the max-height is.

Is it better just to stick to not using the details element yet? Here’s a modern, CSS only, version of the accordian type of drop-down. It uses a change in grid-template-rows from 0fr to 1fr when open.

The HTML

The modified HTML is pretty simple:

  1. The summary element text has an extra span element.
  2. A new <div> outside the details element for the hidden text of the element.
<details>
    <summary><span>Summary text goes here..</span></summary>
</details>
    
<div class="details-content">
    <p>Nulla commodo occaecat consectetur commodo consectetur ut officia. Ipsum 
    qui laboris eiusmod culpa et mollit aute. Eiusmod esse nisi tempor nostrud
     dolore enim enim tempor consectetur duis commodo etc..</p>
</div>

The CSS

The CSS is a bit more involved but it’s doing more than simply animating the drop down. It’s also hiding the standard drop down symbol and replacing it with a symbol.

details {
    overflow: hidden;
}
summary {
    display: block; /* This hides the summary's ::marker pseudo-element */
}

summary::-webkit-details-marker {
    display: none; /* This also hides the ::marker pseudo-element, but in Safari */
}

div.details-content { 
    /* max-width: 500px; */
    box-sizing: border-box;
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    /* border: 2px solid transparent; */
    transition: max-height 400ms ease-out, border 0ms 400ms linear;
}
details[open] + div.details-content {
    max-height: 2800px; /* Set a max-height value enough to show all the content */        
    /* border-color: #888; */
    transition: max-height 400ms ease-out, border 0ms linear;
}

details span::before {
    content: '\2794';
    margin-right: 0.5em;
    display: inline-block;
    transition: rotate 200ms ease-out;
}

details[open] span::before {
    rotate: 90deg;
    transition: rotate 200ms ease-out;
}
☝