ACDA - FAQ Block (MDB)
Code With ACF Integration
HTML
<!-- ACCA -- Start ------------------------------>
<?php if ( have_rows( 'faq' ) ) : ?>
<?php while ( have_rows( 'faq' ) ) : the_row();?>
<section class="acca">
<div class="container">
<h3 class="faq-heading font-weight-bold mb-4 pb-2 text-center help_title">FAQ</h3>
<div class="row">
<div class="col-md-12 mx-auto mb-5">
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<?php
if ( have_rows( 'questions_answers' ) ) :
$n= true;
$c = 1;
while ( have_rows( 'questions_answers' ) ) : the_row();
if ($n){$active = " show";}else{$active = "";}?>
<!-- Accordion card -->
<div class="card">
<div class="card-header border-bottom border-light wa_header" role="tab" id="headingOne<?php echo $c; ?>">
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne<?php echo $c; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $c; ?>">
<h5 class="font-weight-normal mb-0 wa_tittext"><i class="fas fa-angle-down rotate-icon"></i></h5>
<h5 class="font-weight-normal mb-0 wa_tittext" style="margin-right: 30px; clear: none;"><?php echo get_sub_field('question_title'); ?></h5>
</a>
</div>
<div id="collapseOne<?php echo $c; ?>" class="collapse<?php echo $active; ?>" role="tabpanel" aria-labelledby="headingOne<?php echo $c; ?>" data-parent="#accordionEx">
<div class="card-body wa_bodybody">
<?php echo get_sub_field('question_answer'); ?>
</div>
</div>
</div>
<?php $c++; $n = false; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- ACCA -- END -------------------------------->CSS
/*-- ACCA -- Start ------------------------------*/
.acca{
border-top: solid 1px #9e9e9e;
}
.faq-heading {
padding-top: 30px;
}
.acca .help_title {
font-family: 'Teko', sans-serif;
color: #798093;
text-align: center;
font-size: 4em;
font-weight: 200;
}
.acca .faq-heading {
padding-top: 30px;
}
.acca .wa_header{
background-color: #9e9e9e !important;
border-radius: 5px !important;
}
.acca .wa_tittext{
color: #fff;
font-size: 1.3em;
}
.acca .md-accordion .card .wa_bodybody{
border: solid 1px #9c9c9c66;
margin-top: 5px;
margin-bottom: 10px;
font-size: 1em;
padding: 5px 5px 5px 20px;
color: #000;
}
/*-- ACCA -- END ------------------------------*/
ACDA - FAQ Block (Bootstrap 5)
Code With ACF Integration
HTML
<!-- ACCA -- Start ------------------------------->
<?php if ( have_rows( 'faq' ) ) : ?>
<?php while ( have_rows( 'faq' ) ) : the_row();?>
<section class="acca">
<div class="container">
<h3 class="faq-heading font-weight-bold mb-4 text-center help_title">FAQ</h3>
<div class="row">
<div class="col-md-12 mx-auto mb-5">
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<?php
if ( have_rows( 'questions_answers' ) ) :
$n= true;
$c = 1;
while ( have_rows( 'questions_answers' ) ) : the_row();
?>
<!-- Accordion card -->
<div class="card">
<div class="card-header border-bottom border-light wa_header" role="tab" id="headingOne<?php echo $c; ?>">
<a data-bs-toggle="collapse" data-bs-parent="#accordionEx" data-bs-target="#collapseOne<?php echo $c; ?>" href="#collapseOne<?php echo $c; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $c; ?>">
<h5 class="font-weight-normal mb-0 wa_tittext" style="margin-right: 30px; clear: none;"><?php echo get_sub_field('question_title'); ?> <i id="icon-<?php echo $c; ?>" class="fas fa-angle-down"></i></h5>
</a>
</div>
<div id="collapseOne<?php echo $c; ?>" class="collapse" role="tabpanel" aria-labelledby="headingOne<?php echo $c; ?>" data-parent="#accordionEx">
<div class="card-body wa_bodybody">
<?php echo get_sub_field('question_answer'); ?>
</div>
</div>
<script>
var myCollapsible = document.getElementById('collapseOne<?php echo $c; ?>')
myCollapsible.addEventListener('shown.bs.collapse', function () {
document.getElementById("icon-<?php echo $c; ?>").style.webkitTransform = "rotate(180deg)";
});
myCollapsible.addEventListener('hidden.bs.collapse', function () {
document.getElementById("icon-<?php echo $c; ?>").style.webkitTransform = "none";
});
</script>
</div>
<?php $c++; $n = false; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<script>
$("#collapseOne1").addClass( "show" );
document.getElementById("icon-1").style.webkitTransform = "rotate(180deg)";
</script>
<!-- ACCA -- END -------------------------------->CSS
/*-- ACCA -- Start ------------------------------*/
.acca {
background: #F1F1F1;
}
.faq-heading {
padding-top: 30px;
}
.acca .help_title {
font-family: Oswald;
font-style: normal;
font-weight: normal;
font-size: 48px;
line-height: 71px;
text-align: center;
color: #000000;
}
.acca .faq-heading {
padding-top: 30px;
}
.acca .wa_header {
background-color: #E0E0E0 !important;
border-radius: 5px !important;
}
.acca .wa_tittext {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #000000;
text-decoration: none;
padding: 9px 0px;
}
.acca a {
text-decoration: none;
}
.acca .md-accordion .card .wa_bodybody {
margin-top: 5px;
margin-bottom: 10px;
padding: 15px 5px 15px 20px;
color: #000;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
}
.acca .collapse{
background: #F1F1F1;
border: 0px;
}
.acca .card {
border: 0px solid rgba(0,0,0,.125);
background: #F1F1F1;
}
.fa-angle-down{
float: right;
}
@media (max-width: 768px) {
.acca .faq-heading {
padding-top: 20px;
}
}
/*-- ACCA -- END ------------------------------*/
dont use MDB
need to use bootstrap 5 cdn
A0140
Code With ACF Integration
HTML
<!-- ACCA -- Start ------------------------------->
<?php if ( have_rows( 'faq' ) ) : ?>
<?php while ( have_rows( 'faq' ) ) : the_row();?>
<section class="acca">
<div class="container">
<h3 class="faq-heading font-weight-bold mb-4 text-center help_title"><?php echo get_sub_field('title'); ?></h3>
<div class="row">
<div class="col-md-12 mx-auto mb-5">
<div class="accordion" id="accordionJet">
<?php
if ( have_rows( 'questions_answers' ) ) :
$n= true;
$c = 1;
while ( have_rows( 'questions_answers' ) ) : the_row();
?>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $c; ?>" aria-expanded="true" aria-controls="collapse<?php echo $c; ?>">
<?php echo get_sub_field('question_title'); ?>
</button>
</h2>
<div id="collapse<?php echo $c; ?>" class="accordion-collapse collapse <?php if($c==1) echo ''; ?>" aria-labelledby="heading<?php echo $c; ?>" data-bs-parent="#accordionJet">
<div class="accordion-body">
<?php echo get_sub_field('question_answer'); ?>
</div>
</div>
</div>
<?php $c++; $n = false; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- ACCA -- END -------------------------------->CSS
/*-- ACCA -- Start ------------------------------*/
.acca {
background: #F1F1F1;
}
.faq-heading {
padding-top: 30px;
}
.acca .help_title {
font-family: Oswald;
font-style: normal;
font-weight: normal;
font-size: 48px;
line-height: 71px;
text-align: center;
color: #000000;
}
.acca .faq-heading {
padding-top: 30px;
}
.acca .wa_header {
background-color: #E0E0E0 !important;
border-radius: 5px !important;
}
.acca .wa_tittext {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #000000;
text-decoration: none;
padding: 9px 0px;
}
.acca a {
text-decoration: none;
}
.acca .md-accordion .card .wa_bodybody {
margin-top: 5px;
margin-bottom: 10px;
padding: 15px 5px 15px 20px;
color: #000;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
}
.acca .collapse{
background: #F1F1F1;
border: 0px;
}
.acca .card {
border: 0px solid rgba(0,0,0,.125);
background: #F1F1F1;
}
.fa-angle-down{
float: right;
}
.acca .accordion-button {
background-color: #D72323 !important;
color: #fff !important;
font-family: Scada !important;
font-style: normal;
font-weight: normal;
line-height: 110%;
box-shadow: none !important;
font-size: 23px !important;
}
.acca .accordion-body {
padding: 1rem 1.25rem;
font-family: Yantramanav;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 120%;
text-align: center;
color: #3A4750;
}
.accordion-button::after {
filter: brightness(73.5);
}
@media (max-width: 768px) {
.acca .faq-heading {
padding-top: 20px;
}
}
/*-- ACCA -- END ------------------------------*/
