Js snippet for aria expanded

PHOTO EMBED

Sun Oct 20 2024 02:11:15 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #js #expand #aria #aria-expanded

function buttonClickHandler(container, list) {
    const listHeight = list.getBoundingClientRect().height;
  // this refers to the button
    const buttonIsExpanded = this.getAttribute('aria-expanded') === 'false';

    // Toggle aria-expanded when click occurs
    this.setAttribute('aria-expanded', !buttonIsExpanded ? 'false' : 'true');

    // change the text of the link based on the data attr being expanded or not
    this.textContent = !buttonIsExpanded
      ? 'See all module items'
      : 'See less module items';

    // change the html class name
    if (container.classList.contains('shortlist')) {
      container.classList.replace('shortlist', 'longlist');
      container.style.maxHeight = `${listHeight}px`;
    } else {
      container.classList.replace('longlist', 'shortlist');
      container.style.maxHeight = '13rem';
    }
  }
content_copyCOPY