Example: Accordion Component with Helpers

📋 Accordion Component

Example: Component Using Helper Utilities

💡 Key Concept: Using Helpers in Components

This accordion component demonstrates how to use the helpers library in your components:

slideDown() and slideUp() - Smooth animations
delegate() - Efficient event handling
Clean, reusable code with helper functions

Single Mode Accordion

Only one item can be open at a time:

Native web development means building web applications using standard browser APIs and web technologies without relying on heavy frameworks. It emphasizes understanding and leveraging the web platform itself.

Helper utilities provide common functionality that you'd otherwise need to write repeatedly. They make your code more maintainable, reduce bugs, and improve developer productivity. The helpers library includes utilities for DOM manipulation, animations, forms, and more.

This accordion uses the slideDown() and slideUp() helpers from the animation library for smooth transitions. Event handling is optimized using the delegate() helper, which attaches a single event listener to the parent element instead of one for each item.

Using helpers like delegate() improves performance by reducing the number of event listeners. Animation helpers use requestAnimationFrame for smooth, optimized animations. This results in better performance and smoother user experience.

Event Log

No events yet. Click accordion items above.

Multiple Mode Accordion

Multiple items can be open simultaneously:

Available Functions:
• $() and $$() - Query selectors
• createElement() - Create elements with attributes
• addClass(), removeClass() - Class manipulation
• delegate() - Event delegation
• And many more!

Available Functions:
• fadeIn(), fadeOut() - Fade animations
• slideDown(), slideUp() - Slide animations
• shake(), pulse(), bounce() - Motion effects
• debounce(), throttle() - Performance optimization

Available Functions:
• getFormData() - Extract form data as object
• validateForm() - Validate with custom rules
• showFieldError() - Display validation errors
• autoSaveForm() - Auto-save to localStorage

Available Functions:
• camelCase(), kebabCase() - Case conversion
• truncate(), slugify() - String formatting
• formatCurrency(), formatDate() - Number/date formatting
• escapeHtml(), highlight() - Safety & display

Implementation

Here's how the accordion component uses helpers:

Implementation Code

import { slideDown, slideUp, delegate } from '../helpers/index.js';

class AccordionComponent extends HTMLElement {
  attachEventListeners() {
    // Use delegate helper for efficient event handling
    delegate(this.shadowRoot, 'click', '.accordion-header', (event) => {
      this.toggleItem(event.currentTarget.parentElement);
    });
  }

  async openItem(item) {
    const content = item.querySelector('.accordion-content');
    // Use slideDown helper for smooth animation
    await slideDown(content, 300);
  }

  async closeItem(item) {
    const content = item.querySelector('.accordion-content');
    // Use slideUp helper for smooth animation
    await slideUp(content, 300);
  }
}