READ MORE / READ LESS ACCORDION TOGGLE

The accordion only allows a single title e.g. 'Read more' - but the expected behaviour is for it to toggle to 'Read less' or similar when the accordion item is open.

Add this code to your footer section in 'Advanced > Code Injection' (business plan required?) and it will apply site-wide:

<script>
// Add an event listener to run the code once the DOM content has been loaded
document.addEventListener('DOMContentLoaded', function () {
  // Select all elements with the 'accordion-item__click-target' class
  var readToggleButtons = document.querySelectorAll('.accordion-item__click-target');
  
  // Check if the buttons exist on the page
  if (readToggleButtons) {
    // Iterate through all the buttons
    readToggleButtons.forEach(function (readToggleButton) {
      // Add a click event listener to each button
      readToggleButton.addEventListener('click', function () {
        // Set a timeout to run the code after a short delay (50ms) to ensure the 'aria-expanded' attribute is updated before toggling the text
        setTimeout(function () {
          // Select the span element with the 'accordion-item__title' class inside the current button
          var readToggleSpan = readToggleButton.querySelector('.accordion-item__title');
          // Determine if the current button is expanded based on the 'aria-expanded' attribute value
          var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true';
          // Toggle the text based on whether the button is expanded or not
          toggleText(readToggleSpan, isExpanded);
        }, 50);
      });
    });
  }

  // Define the 'toggleText' function that changes the text of the given element based on the 'isExpanded' parameter
  function toggleText(element, isExpanded) {
    // If the button is expanded, set the text to 'Read less'
    if (isExpanded) {
      element.innerHTML = 'Read less';
    // Otherwise, set the text to 'Read more'
    } else {
      element.innerHTML = 'Read more';
    }
  }
});
</script>

On 4/11/2023 at 1:56 PM, Billy_Lindon said:

The accordion only allows a single title e.g. 'Read more' - but the expected behaviour is for it to toggle to 'Read less' or similar when the accordion item is open.

Add this code to your footer section in 'Advanced > Code Injection' (business plan required?) and it will apply site-wide:

<script>
// Add an event listener to run the code once the DOM content has been loaded
document.addEventListener('DOMContentLoaded', function () {
  // Select all elements with the 'accordion-item__click-target' class
  var readToggleButtons = document.querySelectorAll('.accordion-item__click-target');
  
  // Check if the buttons exist on the page
  if (readToggleButtons) {
    // Iterate through all the buttons
    readToggleButtons.forEach(function (readToggleButton) {
      // Add a click event listener to each button
      readToggleButton.addEventListener('click', function () {
        // Set a timeout to run the code after a short delay (50ms) to ensure the 'aria-expanded' attribute is updated before toggling the text
        setTimeout(function () {
          // Select the span element with the 'accordion-item__title' class inside the current button
          var readToggleSpan = readToggleButton.querySelector('.accordion-item__title');
          // Determine if the current button is expanded based on the 'aria-expanded' attribute value
          var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true';
          // Toggle the text based on whether the button is expanded or not
          toggleText(readToggleSpan, isExpanded);
        }, 50);
      });
    });
  }

  // Define the 'toggleText' function that changes the text of the given element based on the 'isExpanded' parameter
  function toggleText(element, isExpanded) {
    // If the button is expanded, set the text to 'Read less'
    if (isExpanded) {
      element.innerHTML = 'Read less';
    // Otherwise, set the text to 'Read more'
    } else {
      element.innerHTML = 'Read more';
    }
  }
});
</script>

 

Wow this is awesome! Super easy to implement and works as expected. Exactly what I was looking for, thank you so much for this!

Hi @Billy_Lindon! I'm using this awesome 'read more' accordion on my services menu, and it works perfectly! However, I also have an accordion in my mobile footer, and this script is changing the title to 'read less' when opened. Is there a way to exclude the footer content from being affected by this script?

The site is: https://fife-sunflower-68mk.squarespace.com/spa-menu
pw: elipsis

On 11/8/2023 at 2:13 AM, mbockmaster said:

Hi @Billy_Lindon! I'm using this awesome 'read more' accordion on my services menu, and it works perfectly! However, I also have an accordion in my mobile footer, and this script is changing the title to 'read less' when opened. Is there a way to exclude the footer content from being affected by this script?

The site is: https://fife-sunflower-68mk.squarespace.com/spa-menu
pw: elipsis

Try change the code to this (I added some class for page content, exclude footer)

<script>
// Add an event listener to run the code once the DOM content has been loaded
document.addEventListener('DOMContentLoaded', function () {
  // Select all elements with the 'accordion-item__click-target' class
  var readToggleButtons = document.querySelectorAll('#page article .accordion-item__click-target');
  
  // Check if the buttons exist on the page
  if (readToggleButtons) {
    // Iterate through all the buttons
    readToggleButtons.forEach(function (readToggleButton) {
      // Add a click event listener to each button
      readToggleButton.addEventListener('click', function () {
        // Set a timeout to run the code after a short delay (50ms) to ensure the 'aria-expanded' attribute is updated before toggling the text
        setTimeout(function () {
          // Select the span element with the 'accordion-item__title' class inside the current button
          var readToggleSpan = readToggleButton.querySelector('#page article .accordion-item__title');
          // Determine if the current button is expanded based on the 'aria-expanded' attribute value
          var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true';
          // Toggle the text based on whether the button is expanded or not
          toggleText(readToggleSpan, isExpanded);
        }, 50);
      });
    });
  }

  // Define the 'toggleText' function that changes the text of the given element based on the 'isExpanded' parameter
  function toggleText(element, isExpanded) {
    // If the button is expanded, set the text to 'Read less'
    if (isExpanded) {
      element.innerHTML = 'Read less';
    // Otherwise, set the text to 'Read more'
    } else {
      element.innerHTML = 'Read more';
    }
  }
});
</script>

On 11/10/2023 at 3:14 AM, tuanphan said:

Try change the code to this (I added some class for page content, exclude footer)

<script>
// Add an event listener to run the code once the DOM content has been loaded
document.addEventListener('DOMContentLoaded', function () {
  // Select all elements with the 'accordion-item__click-target' class
  var readToggleButtons = document.querySelectorAll('#page article .accordion-item__click-target');
  
  // Check if the buttons exist on the page
  if (readToggleButtons) {
    // Iterate through all the buttons
    readToggleButtons.forEach(function (readToggleButton) {
      // Add a click event listener to each button
      readToggleButton.addEventListener('click', function () {
        // Set a timeout to run the code after a short delay (50ms) to ensure the 'aria-expanded' attribute is updated before toggling the text
        setTimeout(function () {
          // Select the span element with the 'accordion-item__title' class inside the current button
          var readToggleSpan = readToggleButton.querySelector('#page article .accordion-item__title');
          // Determine if the current button is expanded based on the 'aria-expanded' attribute value
          var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true';
          // Toggle the text based on whether the button is expanded or not
          toggleText(readToggleSpan, isExpanded);
        }, 50);
      });
    });
  }

  // Define the 'toggleText' function that changes the text of the given element based on the 'isExpanded' parameter
  function toggleText(element, isExpanded) {
    // If the button is expanded, set the text to 'Read less'
    if (isExpanded) {
      element.innerHTML = 'Read less';
    // Otherwise, set the text to 'Read more'
    } else {
      element.innerHTML = 'Read more';
    }
  }
});
</script>

 

Ah, thank you SO much @tuanphan!!!