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
Topic summary
Users seek to modify the Dawn theme’s collapsible tabs so only one accordion stays open at a time, instead of allowing multiple simultaneous expansions.
Primary Solution:
- Edit
Assets/global.jsin the theme code editor - Add JavaScript code within the
summary.addEventListener('click')function that closes all other details elements when one opens - Code targets elements with IDs starting with
Details-
Key Issue & Fix:
The initial solution breaks the main navigation menu on mobile and desktop. The workaround is to change the selector from Details- to Details-template in the added code, which prevents interference with menu functionality.
Additional Refinement:
One user reported that accordions couldn’t be closed after clicking a second time (one always remained open). An updated code snippet addresses this by checking the open attribute state before removing it.
Alternative Approach:
Another solution uses jQuery to handle click events on .product__accordion details elements.
Open Question:
Users ask whether this solution can extend to the “collapsible content” section, with suggestions to replicate the HTML structure from collapsible rows.
Hi @troydewit
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/global.js
- 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');
})
2 Likes
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.
2 Likes
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?
1 Like
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?
Hi,
Could you please share your URL store? We will help to check it.
In the code snippets you added, change “Details-” to “Details-template”
Took me hours to figure this out. Seems to work great now, hopefully this solution will work for you
This worked for me and didn’t ruin my header. For those looking for this solution this is it!
Thanks!
1 Like
Can you share a screenshot of where to add this code? Thanks!
Thanks. it works on dawn theme.
This worked but it doesn’t close the collapsible row when you click it a second time so one row is always opened
Hi @undercoverfresh ,
May I suggest code below to replace old code:
document.querySelectorAll('.product__accordion [id^="Details-"] summary').forEach((sum) => {
sum.setAttribute('aria-expanded',false);
})
document.querySelectorAll('.product__accordion [id^="Details-"]').forEach((sum) => {
if(summary.parentElement.hasAttribute('open')!= sum.hasAttribute('open'))
sum.removeAttribute('open');
})
1 Like
This worked thank you.
Hi, where should I put this code? at the very bottom? Thanks for you time
$(document).ready(function(){
$('.product__accordion details').on('click',function(){
$(this).attr('open');
$(this).parent('.product__accordion').siblings().find('details').removeAttr('open');
});
});
Thank you - this is great.
Is there a version of this that also works with collapsable rows on the “collapsable content” section?
Hi @woolkind ,
You only create HTML as the same this one after that it will work. Or could you share your store URL? I will help to check it.
sorry I don’t understand what you mean.
Hi,
It means you only need to organize HTML structure in "collapsable content " the same “collapsable row”. After that it will apply auto this featured on it.