Mikulew / css-animated-details-element

The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it.

Animated Details Element

Table of contents

• General info
• Technologies
• Demo
• Resources

General info

The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. This tag is used to create an interactive widget that the user can open or close. The content of the details tag is visible when open the set attributes.

Using these elements, I have created a list of painters who inspire and admire me.

Technologies

• HTML5
• CSS3

Demo

• see here

Resources

• MDN: <details>
• MDN: <summary>
• GeekforGeeks: HTML | <details> tag
• Two Issues Styling the Details Element and How to Solve Them
• How to Animate the Details Element
• Red Stapler: CSS Hack - EP.1 Vertical Timeline Widget
• DesignCourse: 2 HTML Elements I Never Used!? (Details & Summary)
• HTML is Not a Programming Language?