Product page - ''Accordion'' description + Add to Cart Button problem

New Member
3 0 0

Hello, I am having an issue with my theme. I have changed the position of my description on the product page (through the product-template.liquid as I want it before the Add to Cart Button). And I made the description ''Accordion'' using a custom code directly on the product editor (I am leaving the code used below). Now For some reason, when I click on the Description section it triggers the add to cart button and send me to the cart.


I would really appreciate some help.  Thank you


Here is the custom code I am using in the HTML editor (product description page)


<p style="border: 1px solid #6e18ea; padding: 1em; text-align: center;"><strong>This is the first line of text</strong><br> this is the second one./p>
<meta name="viewport" content="width=device-width, initial-scale=1">
.accordion {
background-color: #ffffff;
color: #000000;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.7s;

.active, .accordion:hover {
background-color: #ffffff;

.accordion:after {
content: '\002B';
color: #ffffff;
font-weight: bold;
float: right;
margin-left: 5px;

.active:after {
content: "\2212";

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.8s ease-out;
border-bottom: 1px solid black;
<button class="accordion">title 1</button>
<div class="panel">
<p>this is text 1</a></div>
<button class="accordion">title 2</button>
<div class="panel">
<p>this is text 2</p>
<script>// <![CDATA[
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if ({ = null;
} else { = panel.scrollHeight + "px";
// ]]></script>
<meta charset="utf-8">
<p> </p>



Also leaving here a screenshot of my product-template liquid

(So description then customization app then add to cart - that's the idea)

Screen Shot 2020-01-23 at 11.15.46 AM.png



Shopify Partner
508 76 97

Please share your site URL,

So I will check and provide a solution here.

Want to modify or custom changes on store hire me.

If helpful then please Like and Accept Solution.


Skype :

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing