1. Home
  2. Docs
  3. Home & Beauty
  4. Theme Features
  5. Product & Cart
  6. Accordion

Accordion

Sample HTML code

<article class="beefup  is-open">
<h3 class="beefup__head"> </h3>
<div class="beefup__body"> </div>
</article>

<article class="beefup">
<h3 class="beefup__head"> </h3>
<div class="beefup__body"> </div>
</article> 

<article class="beefup">
<h3 class="beefup__head"> </h3>
<div class="beefup__body"> </div>
</article> 

<article class="beefup">
<h3 class="beefup__head"> </h3>
<div class="beefup__body"> </div>
</article> 

below Video base on Outfit theme which use same Accordion.

FYI – if you have messy HTML code then use website https://www.striphtml.com/ to clean unwanted HTML

Global Accordion

You can easily add global content for all product. We deign two way to add global accordion.

1 – using page builder with accordion HTML code

<article class="beefup">
<h3 class="beefup__head">FAQ </h3>
<div class="beefup__body">A frequently asked questions list is often used in articles, websites, email lists, and online forums where common questions tend to recur, for example through posts or queries by new users related to common knowledge gaps. Wikipedia </div>
</article>

<article class="beefup">
<h3 class="beefup__head">Shipping & Delivery </h3>
<div class="beefup__body">
<p>In-stock furniture frames and in-stock cushions ship approximately by the date noted above or within 7-10 days of order receipt via FedEx Large Delivery.
</p> 
<p>Custom cushions are made to order and ship separately from frames. Custom cushions are made to order and arrive approximately by the date noted above or within approximately 3-4 weeks of order receipt via FedEx Delivery.
</p> 
<p>Return Policy: Custom items are made to order and non-returnable. In the event that an item arrives defective or damaged, please let us know immediately upon receipt and we will make it right. If you have questions about returns, please visit our Return Policy page.
</p> 
<p>We deliver within the continental United States, Hawaii, Alaska, and Canada. If you have questions about shipping or delivery, please visit our Shipping Information page, or contact us.
</p> 
</div>
</article>

Page to Accordion

<article class="beefup">
<h3 class="beefup__head">Shipping</h3>
<div class="beefup__body" title="shipping"> </div>
</article>

<article class="beefup">
<h3 class="beefup__head">Return Policy</h3>
<div class="beefup__body" title="return-policy"> </div>
</article>

To pull page content, you just need to add the page path as title="page-path". This works with global content.