Expand/Collapse Widgets

Definition

A widget is a small application or element that provides a specific function or service. In web development, widgets are reusable UI components that encapsulate functionality and styling.

This expand/collapse widget allows users to reveal or hide content with a smooth animation.

Key Features

  • Smooth expand and collapse animations
  • Accessible and keyboard-friendly design
  • Responsive layout that works on all devices
  • Easy to customize styling
  • Lightweight with vanilla JavaScript
  • Clear visual feedback on interaction

Implementation Details

This widget uses vanilla JavaScript to toggle classes that control the visibility and height of the content container.

Steps:

  • Click the button to trigger the toggle function
  • The function adds or removes the 'active' class
  • CSS transitions smoothly animate the height change
  • The icon rotates to indicate the state

Common Applications

  • FAQ sections on websites
  • Product details and specifications
  • Navigation menus and submenus
  • Settings and preferences panels
  • Article summaries and full content
  • Collapsible form sections