Expand/Collapse Widget Demo

Example 1: Basic Information
What is Lorem Ipsum? ▼

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Example 2: Features List
Key Features ▼

Our Amazing Features:

  • Smooth animations and transitions
  • Responsive design that works on all devices
  • Easy to customize and extend
  • Lightweight and performant
  • No external dependencies required

These features make our widget perfect for any modern web application!

Example 3: FAQ Item
How do I use this widget? ▼

Using the widget is simple:

  1. Click on the header to expand or collapse the content
  2. The arrow icon will rotate to indicate the current state
  3. Content smoothly animates in and out of view

Customization Options:

You can easily customize the colors, fonts, animation speeds, and more by modifying the CSS variables and styles in the stylesheet.

Example 4: Technical Details
Technical Implementation ▼

Technology Stack:

This widget is built using vanilla JavaScript, HTML5, and CSS3. No frameworks or libraries are required!

Browser Compatibility:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

The widget uses modern CSS transitions and JavaScript event handling to provide a smooth user experience.

Example 5: Contact Information
Get in Touch ▼

Contact Us:

We'd love to hear from you! Here are various ways to reach us:

  • Email: hello@example.com
  • Phone: +1 (555) 123-4567
  • Address: 123 Web Street, Internet City, 12345
  • Hours: Monday-Friday, 9AM-5PM EST

Feel free to reach out with any questions, suggestions, or feedback!