Dawn theme product page collapsible menu - customization

[Sivadarshan]

I'm using the Dawn theme and want to customize the product page's collapsible menus (Description, Care, Help) so that only one menu is open at a time. This should work on both mobile and desktop views. When a tab is opened, the previously opened tab should automatically close.

website: https://the-rugged.com/

password: rugged

[StevenT_A7]

Hi @Sivadarshan , 

Please open main-product.liquid , locate details tag and insert the below code :-

<script>
document.addEventListener("DOMContentLoaded", function ()

{
const collapsibles = document.querySelectorAll('details');

collapsibles.forEach((el) =>

{
el.addEventListener('toggle', function ()

{
if (el.open)

{
collapsibles.forEach((other) =>

{
if (other !== el && other.open)

{
other.removeAttribute('open');
}
});
}
});
});
});
</script>

Please let me know if it works ! 

Thanks

[BiDeal-Discount · Accepted solution]

Hi @Sivadarshan 

let add this JS code to your file header.liquid:

<script>
document.addEventListener('DOMContentLoaded', () => {
 document.querySelectorAll('.product__accordion details').forEach((detail) => {
  detail.addEventListener('toggle', (event) => {
    if (detail.open) {
      // Close all other details elements except the one just opened
      document.querySelectorAll('.product__accordion details').forEach((otherDetail) => {
        if (otherDetail !== detail && otherDetail.open) {
          otherDetail.open = false;
        }
      });
    }
  });
 });
});
</script>