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: Feature List

Key Features

▼

Our product comes with amazing features:

  • Responsive design that works on all devices
  • Easy to customize with CSS variables
  • Smooth animations and transitions
  • Accessible and semantic HTML structure
  • Cross-browser compatible
Note: All features are included in the base package with no additional cost.
Example 3: FAQ Item

How do I get started?

▼

Getting started is easy! Follow these simple steps:

  • Step 1: Download the package from our website
  • Step 2: Extract the files to your project directory
  • Step 3: Include the necessary CSS and JavaScript files
  • Step 4: Copy the HTML structure and customize to your needs

If you encounter any issues, please refer to our comprehensive documentation or contact our support team.

Example 4: Technical Details

Browser Compatibility

▼

This widget is compatible with all modern browsers:

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

For older browsers, we recommend using polyfills or graceful degradation techniques.

Example 5: Pre-expanded Widget

This Widget Starts Expanded

▼

This widget demonstrates that you can have widgets start in an expanded state by default.

Simply add the "show" class to the details container and the "expanded" class to the toggle icon.

Pro Tip: You can use this for important information that should be visible by default.