Accordion Collapsible FAQs
Posted: Sun May 15, 2022 9:43 am
Still working on Info Pages and wanted an Accordion style list of collapsible FAQ's for some Info Pages.
With help from W3Schools (and PRO Addons, including the magic that is built into Phoenix Cart and Bootstrap) and a reminder that as with everything in life, everything is easier said than done and everything is more complicated than first thought, I finally have the following code which works as we want it when pasted into the Page Text section of an Info Page. Yay!
Simply copy/paste more card code blocks, editing the Qx ids, for addition Q's and A's.
Anyway, sharing here in case it's useful to others.
We only need it for some Info Pages so haven't tried (currently don't have the spare time) to make it into an addon. Maybe another project when we have spare time to use s08e02 - Per Product FAQs as a basis.
This displays like this on our demo:
https://psiwebsites.com/themes/psidemo/shipping.php
With help from W3Schools (and PRO Addons, including the magic that is built into Phoenix Cart and Bootstrap) and a reminder that as with everything in life, everything is easier said than done and everything is more complicated than first thought, I finally have the following code which works as we want it when pasted into the Page Text section of an Info Page. Yay!
Simply copy/paste more card code blocks, editing the Qx ids, for addition Q's and A's.
Anyway, sharing here in case it's useful to others.
We only need it for some Info Pages so haven't tried (currently don't have the spare time) to make it into an addon. Maybe another project when we have spare time to use s08e02 - Per Product FAQs as a basis.
Code: Select all
<h2>F.A.Q.'s</h2>
<div id="accordionInfoFaq" class="accordion mb-2">
<!--Start Card Code Block-->
<div class="card">
<div class="card-header collapsed" data-toggle="collapse" data-target="#Q1">
<a class="card-link">
<b>Q:</b> Question #1<i class="fa fa-chevron-up float-right"></i>
</a>
</div>
<div id="Q1" class="collapse" data-parent="#accordionInfoFaq">
<div class="card-body">
<b>A:</b> Answer to question 1 ...
</div>
</div>
</div>
<!--End Card Code Block-->
<div class="card">
<div class="card-header collapsed" data-toggle="collapse" data-target="#Q2">
<a class="card-link">
<b>Q:</b> Question #2<i class="fa fa-chevron-up float-right"></i>
</a>
</div>
<div id="Q2" class="collapse" data-parent="#accordionInfoFaq">
<div class="card-body">
<b>A:</b> Answer to question 2 ...
</div>
</div>
</div>
<div class="card">
<div class="card-header collapsed" data-toggle="collapse" data-target="#Q3">
<a class="card-link">
<b>Q:</b> Question #3<i class="fa fa-chevron-up float-right"></i>
</a>
</div>
<div id="Q3" class="collapse" data-parent="#accordionInfoFaq">
<div class="card-body">
<b>A:</b> Answer to question 3 ...
</div>
</div>
</div>
</div>
<style>
.card-header .fa {
transition: .3s transform ease-in-out;
}
.card-header.collapsed .fa {
transform: rotate(180deg);
}
</style>https://psiwebsites.com/themes/psidemo/shipping.php