HTML 5 details and summary component animation

Standard
Spread the love

Up until now, to collapse and expand certain information, we had to rely on JavaScript or use CSS pseudo selectors. With HTML 5, we have a new kid on the block – details and summary. Put all the content inside details that you wish to hide initially and add a hint for it using summary tag. Open the page in chrome browser you will see a nice little triangle to expand/collapse the information.

Here is what caniuse.com has to say about the support of details and summary.

Adding details and summary block is pretty easy. Here is a sample code.


<article>
        <header>We must embrace change</header>
        <div>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit molestiae beatae doloremque fuga odit unde ipsam obcaecati corrupti provident laborum incidunt assumenda possimus facilis, dicta qui nobis alias eligendi cum.
            <details>
                <summary>Read More</summary>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero officia voluptates repellat quas est a, corrupti facere ullam modi suscipit sunt temporibus veniam, animi beatae reiciendis. Voluptatibus, asperiores et. Placeat! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, fugiat, ex culpa nihil totam at officia eaque dolores, sapiente repudiandae rerum cumque tempora alias recusandae neque dicta non earum praesentium.
            </details>
        </div>
    </article>

Notice how summary tag has been nested inside details. The text inside summary tag will be visible initially.

The moment you will click the triangle before Read More, you will see the expanded content.

For simple collapse expand content, this is simply awesome. Portable across browsers, zero JavaScript code and definitely serves the purpose. Interestingly, there is a mechanism through which you can apply an effect on the summary field when it is in expanded state. Add following style to the HTML page and see the magic.

details summary {
   transition: 0.7s;
}

details&#91;open] summary{
   opacity: 0;
}

As soon as you expand the details section, the summary will fade away. Well you can think of more subtle effects than just fading it.