// eslint-disable-next-line complexity
  function moduleToggleHandler(item) {
    const contentContainer = item.querySelector('.module-listing__content');
    const list = item.querySelector('.module-listing__list');
    const numberOfItems = getNumberofItems(list);

    // eslint-disable-next-line curly
    if (!contentContainer || !list || !numberOfItems) return; // Stop execution if any of the targetted items fails

    // if the number of children is greater than 4, then in the component a condition is checked where it turns on the link html
    if (numberOfItems > 4) {
      const link = item.querySelector('a.module-listing__toggler');
      // eslint-disable-next-line curly
      if (!link) return;

      link.addEventListener('click', function () {
        // eslint-disable-next-line no-use-before-define
        // USE CALL ON THE FUNCTION buttonClickHandler HERE .....
        buttonClickHandler.call(this, contentContainer, list);
        // Call the function with 'this' set to the clicked button s
      });
    }
  }



	// SO WE CAN USE THIS IN HERE => which will refer to the button itself
  function buttonClickHandler(container, list) {
    const listHeight = list.getBoundingClientRect().height;
    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';
    }
  }