Expand/Collapse Widget

Basic Examples

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure and content of websites by using a system of tags and elements that tell web browsers how to display text, images, and other media.

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

JavaScript is a programming language that enables interactive web pages. It is an essential part of web applications and is used to create dynamic and interactive features like form validation, animated charts, and interactive maps.

JavaScript can be executed in web browsers and also on servers using Node.js, making it a versatile language for full-stack web development.

These expand/collapse widgets use a simple JavaScript function to toggle the active state and add/remove the open class. When you click the button, the function finds the next sibling details element and toggles its visibility with a smooth animation.

The animation is achieved using CSS transitions on the max-height property, providing a smooth expand and collapse effect.