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

Highlighted
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">
<style><!--
.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;
}
--></style>
<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>
</div>
<script>// <![CDATA[
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// ]]></script>
<meta charset="utf-8">
<p><span><br></span></p>
<p> </p>
<p><br></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

 

Thanks

0 Likes
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.

Email: bamaniyaketan.sky@gmail.com

Skype : bamaniya.sky

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