Jump to content

Billy_Lindon

Circle Member
  • Posts

    25
  • Joined

  • Last visited

Posts posted by Billy_Lindon

  1. 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>

     

  2. If you want the 'Read more' to change to 'Read less' on toggle - add this script to your footer in 'Advanced > Code Injection' and it will apply to all accordions site-wide:

     

    <script>
    document.addEventListener('DOMContentLoaded', function () {
      var readToggleButtons = document.querySelectorAll('.accordion-item__click-target');
      
      if (readToggleButtons) {
        readToggleButtons.forEach(function (readToggleButton) {
          readToggleButton.addEventListener('click', function () {
            setTimeout(function () {
              var readToggleSpan = readToggleButton.querySelector('.accordion-item__title');
              var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true';
              toggleText(readToggleSpan, isExpanded);
            }, 50); // We're adding a small delay here to make sure the aria-expanded attribute is updated before we toggle the text
          });
        });
      }
    
      function toggleText(element, isExpanded) {
        if (isExpanded) {
          element.innerHTML = 'Read less';
        } else {
          element.innerHTML = 'Read more';
        }
      }
    });
    </script>

     

  3. Over 3 years now and STILL no .webP support from squarespace. All browsers now support the format. Our competitors are killing us on page-loading performance and ranking higher in search results. So, thanks SQSP for perpetuating the FACT that your platform is bad for SEO. 

    It's infuriating that you utilised .webP on your own home page but deny it for your own customers!
    https://media-www.sqspcdn.com/images/pages/homepage/jun-2022/hero/nina/background/background-3-375.webp

    Shameful and demonstrates the contempt you have for us.

  4. On 9/17/2022 at 1:56 AM, BethHou said:

    Garbage - absolute garbage.  I spend so much time getting it right, and then my site changes.  Things just disappear.  And when I send screenshots to customer support of before and after (it's happened multiple times, so I started screeningshotting right after I made the edit and then a few days later), they just send me links to how to use the editor.  Things are literally shifting and disappearing on my page, and somehow it's not their problem - it's mine.  Seriously considering leaving Squarespace. 

    @ShaneGardner I asked customer service if I could revert and they said no.  Luckily, I only "upgraded" one page.  They did tell me I could recreate the page with the old editor, but when I went to do it, it defaulted to the fluid editor.  So I'm stuck with one of my most important pages being something I can't rely on... I have to check it regularly to see if the content has shifted around or deleted itself.  

    Several times now I've abandoned entire pages built using FE and completely rebuilt pages from scratch using the old editor because it was impossible to work with FE. Squarespace is causing me to try SeedProd on WordPress for my next project. If it works better and costs me less time than FE, I'm gone - and I doubt I'll be back.

  5. I think the feeling in the thread @paul2009 is that it is quite disappointing that this de facto standard web image format is not already supported by a platform whose entire marketing is based on promoting itself as a cool, modern web design platform. It shouldn't be up to the users to request something that is pretty much a web standard now. I can't for a minute imagine the SS product managers are unaware of the importance of next gen image formats!

    It's just so disappointing that someone high up in Squarespace clearly doesn't get it and is not prioritising it.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.