Accordion with transitioning plus symbol
section class="accordion">
<?php if ( get_sub_field( 'accordion_title' ) ) : ?>
<div class="acc-img">
<img src="<?php bloginfo( 'template_url' ); ?>/images/green-line.jpg"/>
</div>
<h2 class="accordion-intro">
<?php the_sub_field( 'accordion_title' ); ?>
</h2>
<?php endif; ?>
<?php if ( have_rows( 'accordion_rows' ) ) : ?>
<?php while ( have_rows( 'accordion_rows' ) ) : ?>
<?php the_row(); ?>
<div class="ac-row">
<h5 class="ac-title">
<?php the_sub_field( 'accordion_title' ); ?>
</h5>
<div class="ac-content">
<?php the_sub_field( 'accordion_content' ); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</section>
// Accordion
$('.ac-title').click(function(){
$(this).parents('.ac-row').toggleClass('active');
$(this).siblings('.ac-content').slideToggle();
});
/* ------------------------------
Accordion
------------------------------ */
.acc-img {
text-align: center;
}
.accordion-intro {
max-width: 768px;
margin: 0 auto 45px;
text-align: center;
}
.accordion-intro h2 {
margin-bottom: 0;
}
.accordion-intro h2:before {
margin: 0 10px 0 0;
}
.ac-row {
border-top: solid 1px #ccc;
max-width: 900px;
margin: 0 auto;
position: relative;
}
.ac-row:last-of-type {
border-bottom: solid 1px #ccc;
}
.ac-title {
cursor: pointer;
margin: 0;
padding: 20px 50px 20px 0;
text-transform: capitalize;
}
.ac-title:after {
color: #b8b23a;
content: '\f067';
font-family: FontAwesome;
font-weight: normal;
position: absolute;
right: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.active .ac-title:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.ac-content {
display: none;
padding-bottom: 20px;
}