🎯 Expand/Collapse Widget Demo

Example 1

What is JavaScript?

â–¼

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.

It enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

Example 2

Key Features of Modern Web Development

â–¼

Modern web development encompasses several key features:

  • Responsive Design: Websites adapt to different screen sizes and devices
  • Progressive Web Apps: Web applications that work like native apps
  • Performance Optimization: Fast loading times and smooth interactions
  • Accessibility: Ensuring content is available to all users
  • Security: Protecting user data and preventing vulnerabilities

These features work together to create exceptional user experiences.

Example 3

How to Use This Widget

â–¼

This expand/collapse widget is simple to use:

  • Click on any header to expand the content
  • Click again to collapse it
  • The arrow icon rotates to indicate the state
  • Smooth animations provide visual feedback

The implementation uses vanilla JavaScript with the toggleDetails() function and CSS transitions for smooth animations.

Each widget is wrapped in a div with the example class, and the collapsible content container has the details class.

Example 4

CSS Animations & Transitions

â–¼

CSS provides powerful tools for creating smooth animations:

Transitions allow you to change property values smoothly over a specified duration. They're perfect for simple state changes like hover effects or showing/hiding content.

Animations give you more control with keyframes, allowing you to define multiple intermediate states and create complex motion sequences.

This widget uses max-height transitions combined with overflow hidden to create a smooth expand/collapse effect without using JavaScript for the animation itself.

Example 5

Best Practices for Web Accessibility

â–¼

Creating accessible web content is crucial for inclusive design:

  • Semantic HTML: Use appropriate HTML elements for their intended purpose
  • Keyboard Navigation: Ensure all interactive elements are keyboard accessible
  • ARIA Labels: Provide additional context for screen readers
  • Color Contrast: Maintain sufficient contrast ratios for readability
  • Focus Indicators: Make it clear which element has focus
  • Alt Text: Describe images for users who can't see them

These practices ensure that everyone can access and use your web applications effectively.