I’m trying to add an accordion/collapsible section to product pages, I followed a
YouTube tutorial and have managed to get the accordions to appear on the product page, but there is content is empty on all except the details (which is not formatted properly).
What theme are you using? Because if you just add a collapsible accordion and use the jQuery library, it won’t be really good.
You can refer to the following JavaScript code, it will work better:
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
const accordions = document.querySelectorAll('.accordion');
accordions.forEach(acc => {
acc.addEventListener('click', () => {
acc.classList.toggle('active');
const panel = acc.nextElementSibling;
const isOpen = panel.style.display === 'block';
panel.style.display = isOpen ? 'none' : 'block';
});
});
</script>
It will need to be changed back and schema code added to be able to display it. This will require creating a section file instead of using a Custom Liquid section.
