Read less in product accordion dropdown

Site URL: https://hibiscus-amphibian-tl3g.squarespace.com/config/commerce

Can anyone tell me how to add a read less link under the expanded text? The code I used is as follows:

<!-- Dropdown Accordion Code -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Info is under additional information on the product tab. 

### **+ Read More**

Info

You mean adding accordion inside accordion or?

Hi tuanphan, yes I guess I am saying that actually.

By the way, you are awesome. I have used so much of your css replies in other threads and all have worked perfectly. Legend. 

Example page https://hibiscus-amphibian-tl3g.squarespace.com/config/design/custom-css 

Under markdown:

### **+<span style="font-family:Futura Light; font-size:0.6em;">Read More**</span>

### **+<span style="font-family:Futura Light; font-size:0.6em;">What's in the box?**</span>

### **+<span style="font-family:Futura Light; font-size:0.6em;">Specifications**</span>

### **+<span style="font-family:Futura Light; font-size:0.6em;">Manuals & Instructions**</span>

<img src="https://static1.squarespace.com/static/5f8654dc5e4dcb01103da947/t/5fc854e846ef2e08cbb2801c/1606964457603/arrow.png?format=20w" alt="download." class="GeneratedImage"> [Data Sheet][1]

<img src="https://static1.squarespace.com/static/5f8654dc5e4dcb01103da947/t/5fc854e846ef2e08cbb2801c/1606964457603/arrow.png?format=20w" alt="download." class="GeneratedImage"> [Manual][2]

<img src="https://static1.squarespace.com/static/5f8654dc5e4dcb01103da947/t/5fc854e846ef2e08cbb2801c/1606964457603/arrow.png?format=20w" alt="download." class="GeneratedImage"> [Quick Guide Illustration][3]

### **+ <span style="font-family:Futura Light; font-size:0.6em;">Video</span>**

### **+ <span style="font-family:Futura Light; font-size:0.6em;">Software</span>**

<img src="https://static1.squarespace.com/static/5f8654dc5e4dcb01103da947/t/5fc854e846ef2e08cbb2801c/1606964457603/arrow.png?format=20w" alt="download." class="GeneratedImage">

<img src="https://static1.squarespace.com/static/5f8654dc5e4dcb01103da947/t/5fc854e846ef2e08cbb2801c/1606964457603/arrow.png?format=20w" alt="download." class="GeneratedImage">

I don't familiar with above code, so I suggest some other ways.

Option 1. Use Accordion Tabs Plugin

I used to do on client site. You can add Accordion inside Accordion, Accordion inside Tabs, Tabs inside Accordion. Easy to customize without coding skills.

This plugin use Markdown Block or Portfolio Page (7.1) or Index Page (7.0)

Option 2. Find free code on Codepen code

I just checked & found 3 free code

• https://codepen.io/glebkema/pen/QQOZRe
• https://codepen.io/brenden/pen/Kwbpyj/
• https://codepen.io/marklsanders/pen/OPZXXv

On 12/8/2020 at 8:18 AM, tuanphan said:

I don't familiar with above code, so I suggest some other ways.

Option 1. Use Accordion Tabs Plugin

I used to do on client site. You can add Accordion inside Accordion, Accordion inside Tabs, Tabs inside Accordion. Easy to customize without coding skills.

This plugin use Markdown Block or Portfolio Page (7.1) or Index Page (7.0)

Option 2. Find free code on Codepen code

I just checked & found 3 free code

• https://codepen.io/glebkema/pen/QQOZRe
• https://codepen.io/brenden/pen/Kwbpyj/
• https://codepen.io/marklsanders/pen/OPZXXv

Hi @tuanphan! You mentioned above that it's possible for the sqspthemes plugin to do "Accordion inside Tabs"

That plugin is the same one that I mentioned in the thread below.  

I have been playing around with it but no success. Would you be able to tell how to achieve it using that plugin? Thank you for the help! 

Hello there,

I would like to know if you find a better option to create an accordion in the product description area? @tuanphan @amanda4

I wish you a beautiful day.

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>