Urgent Collapsible Description Section Not Working Properly

[IvoireSkincare]

I’m launching my website in 5 days and I need help with an issue I’m facing. I created a custom section in my theme code for collapsible descriptions, which I’m using on both product pages and a general content page. However, most of the time, the collapsible sections don’t work once the site is published.

Also, on the mobile interface, the collapsible titles are showing in blue, which I didn’t specify in my design or code.

Could you please help me fix:

1. The inconsistent behavior of the collapsible sections (sometimes not working when published).

2. The blue color of the collapsible titles on mobile, which I didn’t set.

Any urgent guidance would be hugely appreciated so I can launch on time!

The code:

{% comment %}
Collapsible Description Section
File: collapsible-description.liquid
{% endcomment %}

<div class="collapsible-section">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title }}</h2>
{% endif %}

{% for block in section.blocks %}
<div class="collapsible">
<button class="collapsible-btn">{{ block.settings.heading }}</button>
<div class="collapsible-content">
{{ block.settings.content }}
</div>
</div>
{% endfor %}
</div>

<style>
.collapsible-section {
margin: 20px 0;
}

.collapsible {
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}

.collapsible-btn {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
position: relative;
}

.collapsible-content {
display: none;
padding: 10px;
background-color: #f9f9f9;
}

.collapsible-btn::after {
content: '+';
position: absolute;
right: 10px;
}

.collapsible.active .collapsible-btn::after {
content: '-';
}
</style>

<script>
function initCollapsibles() {
const collapsibles = document.querySelectorAll(".collapsible");

collapsibles.forEach(collapsible => {
const button = collapsible.querySelector(".collapsible-btn");
const content = collapsible.querySelector(".collapsible-content");

button.addEventListener("click", function () {
collapsible.classList.toggle("active");

if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
});
}

// Support pour les pages produits chargées via AJAX
document.addEventListener("DOMContentLoaded", initCollapsibles);
document.addEventListener("shopify:section:load", initCollapsibles);
document.addEventListener("shopify:section:select", initCollapsibles);
</script>

{% schema %}
{
"name": "Collapsible Description",
"settings": [
{
"type": "text",
"id": "title",
"label": "Section Title",
"default": "More Information"
}
],
"blocks": [
{
"type": "collapsible",
"name": "Collapsible Item",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Click to expand"
},
{
"type": "richtext",
"id": "content",
"label": "Content",
"default": "<p>Here is your collapsible content.</p>"
}
]
}
],
"presets": [
{
"name": "Collapsible Description",
"category": "Custom"
}
]
}
{% endschema %}

[Emre_SecretHero]

Hi! 👋 Your section and JS logic are well-structured! Here are my suggestions that should get things working consistently:

1. Collapsible sections not working when published
This happens because the JavaScript may not be re-initialized properly when the section is loaded dynamically (e.g., on product pages).
Try placing your script either in a global JS file (like theme.js) or include it in the theme.liquid footer to ensure it always runs.

2. Blue button text on mobile
That’s due to default mobile browser styling on <button> elements. Add this to your CSS:

.collapsible-btn {
  color: #333;
}
.collapsible-btn:focus,
.collapsible-btn:active {
  color: #333;
  outline: none;
}

That should fix both issues — let me know if you'd like help moving the JS globally or adjusting styling for your specific theme!

Good luck on your launch!
Thanks.

[IvoireSkincare]

Thank you for your quick response. I solved the first part of my problem, but I’m not quite sure where exactly to add the part of your code. Could you please be a little more specific about where to place it? Should I add it before or after a specific part of the existing code?

[Emre_SecretHero]

wherever between <style> </style> you can put it. You can revise collapsible-btn in style tag in your code and add two button css state as follows: 

collapsible-btn {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
position: relative;
color: #333;
}

.collapsible-btn:focus,
.collapsible-btn:active {
  color: #333;
  outline: none;
}

You can copy this code and replace the css code of collapsible-btn inside of <style> tag. I added a random color as #333, you can change it whatever you like. 

Hope it helps! If you're still having trouble, I can guide you step by step or take a quick look with you.

[Emre_SecretHero]

Could you do that? Do you need a guidance you can ping me anytime.