FAQ Already Expanded When Opened

Tourist
11 1 2

When FAQ is selected and opened the first category is already expanded. How can I make it collapsed like the others ones? Here is a the code I have undo the edits. Any help is much appreciated!

 

<dl class="accordion">
<dt><a href="#"><small class="right">◄</small>Shop Policies</a></dt>
<dd><span>Due to the customization aspect of our products, please check listings for current lead times. Multiple item shipping discount is automatically applied to your order if items ship to the same address. Please message us if there is something special we can help you with. </span></dd>
<dt><a href="#"><small class="right">◄</small>Returns and Exchanges</a></dt>
<dd>
<p><strong>We gladly accept cancellations</strong></p>
<p>Request a cancellation within: 2 days of purchase</p>
<p><strong>We don't accept returns or exchanges</strong></p>
<p>But please contact me if you have any problems with your order.</p>
<p><strong>Returns and exchange details</strong></p>
<p>Due to the customization aspect of this purchase, no refunds will be honored unless there was an error made on behalf of Service Tribute. Please message us with your concerns and it will be addressed promptly.</p>
</dd>
<dt><a href="#"><small class="right">◄</small>Shipping</a></dt>
<dd><strong>PRODUCT LEAD TIME &amp; SHIPPING INFO:</strong><br /> Each item is made to order, therefore the time needed to prepare your order for shipping varies. For details, please see individual items for the appropriate lead time.<br /> <br /> We ship to the address that you input in the "Ship to" field of your Service Tribute order. If the item is being shipped as a gift, please let us know if you would like a gift receipt included with no pricing and a gift note. Noting that the item is a gift and whether you would like to include a gift note is an option as you are checking out.<br /> <br /> We do not ship internationally at this time. This includes, and is not limited to, working through third party shipping carriers, domestic or otherwise (e.g. online shipping brokers, drop shipping, etc.) to receive Service Tribute products for distribution.<br /> <br /> <strong>ESTIMATED SHIPPING TIMES:</strong><br /> Orders are shipped via UPS (depending on product and quantities indicated) if shipped within the United States. Please allow up to five (5) business days for standard shipping. Shipping upgrades are available at checkout. Please note: We do our best to meet these shipping estimates, but cannot guarantee them. We cannot be held responsible for courier delays and circumstances out of our control. Estimated delivery times are to be used as a guide only and commence from the date the order is shipped.<br /> <br /> There is additional shipping time and costs to Hawaii, Alaska and any other areas considered US territory (i.e. Guam). Please message us for a quote. A tracking number will be provided once the package ships.<br /> <br /> <strong>EXPEDITED SHIPPING OPTIONS:</strong><br /> Shipping upgrades are available for Service Tribute Plaque orders. Actual delivery time will depend on the shipping method you choose. Estimated ship times are indicated in the listing as you are checking out. If you need the product sooner, please message us for a quote and shipping recommendation before you purchase and we will do our best to accommodate you.</dd>
<dt><a href="#"><small class="right">◄</small>Additional Policies and FAQs</a></dt>
<dd>
<p>We are happy to accommodate rush orders if possible; please message us with your deadline and we will do our very best to work with you.</p>
</dd>
</dl> 

 

faq.JPG

0 Likes
Highlighted

Hi there. If you want to create an accordion for this FAQ, you need to add a javascript code to expand and collapse this accordion.
You can add an event click into a tag to toggle between adding and removing the "active" class, to highlight the button that controls the panel and then add style 'display: block' or 'display: none' to toggle between hiding and showing the active panel. 
For more detail about simple of Accordion, you can read and follow this link:  https://www.w3schools.com/howto/howto_js_accordion.asp.

Richard | Front-end Dev @ PageFly
- Click 'Like' to let me know you like my answer!
- Are you having problems building Shopify stores? Check out PageFly - An Advanced Page Builder whose goal is to empower anyone to build a perfect store.
0 Likes
Highlighted
Tourist
11 1 2

Thank you so much! I so got it working :)

0 Likes