Hello,
I have a collapsible tab on my home page (Sense Theme). You can open all the tabs at once but I’d like to change it so that it only opens one tab at a time. Meaning: if you want to open a second tab the other closes automatically.
I’d really appreciate some help.
Thank you!
My store URL is: https://tiktokconsulting.ch/
I’ve attached a screenshot of the particular section.
Hi @lumi2
I would like to give you a suggestion. I hope it can help you to customize your theme. I used to javascript for this solution, and it worked for me.
let collapsibles = document.querySelectorAll(".color-background-2 .collapsible-content .page-width .grid__item .accordion.content-container details")
collapsibles.forEach((collapsible)=>{
collapsible.addEventListener("click", function() {
collapsibles.forEach((element)=>{
if (element.hasAttribute("open")) {
element.removeAttribute("open")
}
})
});
})
This is the video link that records my tested actions. You can refer to it: https://www.loom.com/share/dfcbe93442b54b4e841c0262df45bab6
Let me know if it works for you by giving us a like or marking it as a solution.
Hi BSS-Commerce,
Thanks a lot for your reply! I looked at the video and this is exactly what I wanted. But where in my theme (Sense Theme) should I place your code?
Thank you!
@BSS-Commerce Thanks a lot!! It worked. I really appreciate your help.
For anyone wondering, I placed the code that @BSS-Commerce gave me into “theme.liquid” between .
Hi @BSS-Commerce It worked like in your video, but once I open a tab, I cannot close it anymore. It only closes when I open a new one. It also doesn’t open smoothly like a drop down. Are you able to help me with this?
Hi @lumi2
Please give me a little time so we can check it for you.
Hi @lumi2
With all my efforts, I would like to give you my suggestion. It works well for me. Please replace the old code and replace it with this one
let collapsibles = document.querySelectorAll(".color-background-2 .collapsible-content .page-width .grid__item .accordion.content-container details")
collapsibles.forEach((collapsible, index )=>{
collapsible.addEventListener("click", function(e) {
e.preventDefault()
if (collapsible.hasAttribute("open")) {
collapsible.removeAttribute("open")
} else {
collapsible.setAttribute("open", "")
}
collapsibles.forEach((element, number)=>{
if (number != index) {
if (element.hasAttribute("open")) {
element.removeAttribute("open")
}
}
})
});
})
Link video test: https://www.loom.com/share/736323c6f26741619132f944bbdb420d
I hope that it’s useful for you.
Hi, dear friend
Please, can u tell me where/ I need to past your code in “theme.liquid”?
Thank U 
As we mentioned in the previous replies, you should include the code in a tag in the theme.liquid file.
Can you please let me know what theme you’re using? Also, share with us your store link.
Theme: Sence, link: here
Thank you! It worked perfectly. It’s already great but are you able to change it so that it opens smoothly like a drop down? With other words, that the tab that opens doesn’t just appear out of nowhere, rather slides down when you open it.
You need to place it at the bottom of your theme.liquid file, between the last tag.
Place it right just before the ending tag .
Here you can see what it looks like in my code.
You can follow the way @lumi2 guided you. I think that it will definitely work for you.
@BSS-Commerce @lumi2 nope friends..
I did exactly same, but it doesn’t want to work..
i need this in Product Info section, but I tried with normal “Collapsible content”, and nope, it doesn’t work also…
