Solved

Dawn theme - One collapsible row open at a time

troydewit
Excursionist
22 0 0

Hi,

 

In Dawn theme, is there any way to make collapsible tabs/accordions function so that only 1 stays open a time? At the moment they can all be opened at once.

 

Kind regards

TJ de Wit
Accepted Solution (1)

EBOOST
Shopify Partner
574 172 182

This is an accepted solution.

Hi @troydewit 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_2-1674802164507.png
2. Assets/global.js
3. find "summary.addEventListener('click', (event) => { " after that add code below like the screenshot

document.querySelectorAll('[id^="Details-"] summary').forEach((sum) => {
      sum.setAttribute('aria-expanded',false);
    })
    document.querySelectorAll('[id^="Details-"]').forEach((sum) => {
      sum.removeAttribute('open');
    })

EBOOST_0-1675067484657.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

View solution in original post

Replies 8 (8)

EBOOST
Shopify Partner
574 172 182

This is an accepted solution.

Hi @troydewit 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_2-1674802164507.png
2. Assets/global.js
3. find "summary.addEventListener('click', (event) => { " after that add code below like the screenshot

document.querySelectorAll('[id^="Details-"] summary').forEach((sum) => {
      sum.setAttribute('aria-expanded',false);
    })
    document.querySelectorAll('[id^="Details-"]').forEach((sum) => {
      sum.removeAttribute('open');
    })

EBOOST_0-1675067484657.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST
TheShahriyar
Shopify Partner
1 0 0

Hello @EBOOST ,

 

I came here for the same solution. Your screenshot is missing. So can't see your code. But after reading the instructions I edited my code this way(screenshot added). But not working. Even my whole thing breaks. Can you share the code?Screenshot 2023-04-15 at 2.24.55 PM.png

EBOOST
Shopify Partner
574 172 182

Hi @TheShahriyar,

You can refer the screenshot below

ecstyletheme-·-Edit-Dawn-·-Shopify.png

You need comment code in this function.

ecstyletheme-·-Edit-Dawn-·-Shopify.png

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST
iam_RahulPatel
New Member
4 0 0

This works, but then it messes up the main menu drawer on mobile and desktop. Is there a way to do this so it does not interfere with the main menu?

EBOOST
Shopify Partner
574 172 182

Hi,

Could you please share your URL store? We will help to check it.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST
Coaster
Visitor
1 0 0

In the code snippets you added, change "Details-" to "Details-template" 

Fixed code.PNG

Took me hours to figure this out. Seems to work great now, hopefully this solution will work for you

BSS-Commerce
Shopify Expert
3441 459 512

Hi @troydewit 

Please follow these steps:

- Go to Store Online > Themes -> Edit code. Find Assets/global.js and add this code:

$(document).ready(function(){
  $('.product__accordion details').on('click',function(){
    $(this).attr('open');
    $(this).parent('.product__accordion').siblings().find('details').removeAttr('open');
  });
});

I hope that it will work for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

nicolelemkebb
Tourist
3 1 1

This worked for me and didn't ruin my header. For those looking for this solution this is it!
Thanks!