Why does my Shopify FAQ page collapse when clicking the + button?

Layla2359
Tourist
9 0 4

Hi! just wondering if anyone has any idea what's up with this glitch here: https://shevron.com.sg/pages/faq1

whenever I press the "+" button for the sub-questions, the whole thing just collapses.

 

Replies 2 (2)

Stan_Uvidest
Shopify Partner
20 2 4

Hi @Layla2359 , could you share your js code, it looks like your "Online Shopping" is always triggered despite which tab was clicked

Layla2359
Tourist
9 0 4

i was following the tutorial from this website - https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-s..., but i needed to add the 'Online Shopping' as a bigger heading because i do have other headings as well.

here's the code i have currently!

 

<div class="accordion" id="section1">Online Shopping<span></span>
</div>
<div class="container">
<div class="content">
<p>
</p>
<h3><strong>Browsing</strong></h3>
<div class="accordion" id="section1">What do I need for optimum browsing when visiting shevron.com.sg?<span></span>
</div>
<div class="container">
<div class="content">
<p>To make your experience here as pleasant as possible, we recommend using the latest version of your browser. If you access our website using an older version, we cannot guarantee that all of its features will function properly. Please note that your browser must accept cookies and be SSL compatible.</p>
</div>
</div>
<div class="accordion" id="section2">How accurate is colour display on the Internet?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 2.</p>
</div>
</div>
<h3><strong>Orders</strong></h3>
<div class="accordion" id="section3">How may I get assistance with my online order?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">How do I change information on my order after it has been placed?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">I just finalised my order but I still have not received the order summary.<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<h3><strong>Delivery</strong></h3>
<div class="accordion" id="section3">Where does shevron.com.sg deliver to?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">How much is the delivery charge?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">How long will delivery take?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<div class="accordion" id="section3">How do I track delivery of my order?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<div class="accordion" id="section3">Do I need to sign for my package?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<h3><strong>Gifting</strong></h3>
<div class="accordion" id="section3">Will my order be gift wrapped?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">Can I use a gift card or store credits on the online store?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">Can I include a personalised gift message for my purchase?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<div class="accordion" id="section3">If I give a gift to someone, can that person exchange it for something else on shevron.com.sg?<span></span>
</div>
<h3><strong>Payment</strong></h3>
<div class="accordion" id="section3">What are the accepted modes of payment?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">Is my payment secure?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 4.</p>
</div>
</div>
<div class="accordion" id="section3">Do you accept international credit cards? Do you ship internationally?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<div class="accordion" id="section3">When will my credit card be debited?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>
<div class="accordion" id="section3">What is the security code on my credit card?<span></span>
</div>
<div class="container">
<div class="content">
<p>This is the answer to question 5.</p>
</div>
</div>

</div>
</div>