Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Hi @troydewit
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
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');
})
This is an accepted solution.
Hi @troydewit
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
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');
})
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?
Hi @TheShahriyar,
You can refer the screenshot below
You need comment code in this function.
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
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
This worked for me and didn't ruin my header. For those looking for this solution this is it!
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024