YEH toggleTarget Examples

HTML

<div id="app">
    <h1>YEH toggleTarget Examples</h1>

    <!-- Example 1: Simple Show/Hide Toggle -->
    <div class="example-section">
      <h2>1. Simple Show/Hide Toggle</h2>
      <button
        data-action="toggleTarget"
        data-target="#filters"
        data-toggle-class="hidden">
        Show Filters
      </button>

      <div id="filters" class="hidden">
        <div class="filter-group">
          <label for="search">Search:</label>
          <input type="text" id="search" placeholder="Enter search term...">
        </div>
        <div class="filter-group">
          <label for="category">Category:</label>
          <select id="category">
            <option>All Categories</option>
            <option>Technology</option>
            <option>Business</option>
            <option>Design</option>
          </select>
        </div>
        <div class="filter-group">
          <label for="date">Date:</label>
          <input type="date" id="date">
        </div>
      </div>
    </div>

    <!-- Example 2: Expand/Collapse All -->
    <div class="example-section">
      <h2>2. Expand/Collapse All (Multiple Targets)</h2>
      <button
        data-action="toggleTarget"
        data-target=".message-body, .message-subject"
        data-target-all
        data-toggle-class="collapsed"
        data-toggle-content-self="Expand All">
        Collapse All
      </button>

      <div class="message-item">
        <strong>Message 1</strong>
        <div class="message-subject collapsed">Subject: Meeting Tomorrow</div>
        <div class="message-body collapsed">Hi team, just a reminder about our meeting tomorrow at 10 AM. Please review the agenda beforehand.</div>
      </div>
      <div class="message-item">
        <strong>Message 2</strong>
        <div class="message-subject collapsed">Subject: Project Update</div>
        <div class="message-body collapsed">The latest build is ready for testing. Please...

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      background: #f5f5f5;
      transition: background 0.3s ease, color 0.3s ease;
    }

    body.dark-mode {
      background: #1a1a1a;
      color: #e0e0e0;
    }

    h1 {
      margin-bottom: 2rem;
      color: #333;
    }

    body.dark-mode h1 {
      color: #e0e0e0;
    }

    .example-section {
      background: white;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    body.dark-mode .example-section {
      background: #2a2a2a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .example-section h2 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      color: #555;
    }

    body.dark-mode .example-section h2 {
      color: #b0b0b0;
    }

    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.2s ease;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
    }

    button:hover {
      background: #0056b3;
    }

    button:disabled {
      background: #6c757d;
      cursor: not-allowed;
      opacity: 0.6;
    }

    button.btn-active {
      background: #28a745;
    }

    .hidden {
      display: none;
    }

    .message-body,
    .message-subject {
      padding: 1rem;
      background: #f8f9fa;
      margin-top: 0.5rem;
      border-radius: 4px;
      max-height: 500px;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .message-body.collapsed,
    .message-subject.collapsed {
      max-height: 0;
      padding:...

JavaScript

import { YEH } from 'https://cdn.jsdelivr.net/npm/@yaijs/[email protected]/yeh/yeh.min.js';

    class App extends YEH {
      constructor() {
        super(
          { '#app': ['click'] },
          {},
          { autoTargetResolution: true } // Enable smart targeting
        );
      }

      handleClick(event, target, container) {
        const action = target.dataset.action;
        if (action && this[action]) {
          this[action](target, event, container);
        }
      }

      toggleTarget(target, event, container) {
        const targetSelector = target.dataset.target;
        if (!targetSelector) return;

        const config = {
          targetAll: target.hasAttribute('data-target-all'),
          toggleClass: target.dataset.toggleClass,
          toggleContent: target.dataset.toggleContent,
          toggleAttribute: target.dataset.toggleAttribute,
          toggleAttributeValue: target.dataset.toggleAttributeValue,
          toggleClassSelf: target.dataset.toggleClassSelf,
          toggleContentSelf: target.dataset.toggleContentSelf,
          toggleOnce: target.hasAttribute('data-toggle-once'),
        };

        const targets = config.targetAll
          ? Array.from(document.querySelectorAll(targetSelector))
          : [document.querySelector(targetSelector)].filter(Boolean);

        if (!targets.length) return;

        targets.forEach(targetEl => {
          if (config.toggleClass) {
            targetEl.classList.toggle(config.toggleClass);
          }
          if (config.toggleContent) {
            if (!targetEl.dataset.yOriginalContent) {
              targetEl.dataset.yOriginalContent = targetEl.textContent;
              targetEl.textContent = config.toggleContent;
            } else {
              const current = targetEl.textContent;
              targetEl.textContent = current === config.toggleContent
                ? targetEl.dataset.yOriginalContent
                :...