Skip to content

Instantly share code, notes, and snippets.

@emaildano
Created February 4, 2014 02:00
Show Gist options
  • Save emaildano/8796198 to your computer and use it in GitHub Desktop.
Save emaildano/8796198 to your computer and use it in GitHub Desktop.
Snippet for using Font-Awesome Plus and Minus icons on Bootstrap Accordions
jQuery('.accordion section').click(function() {
jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
.closest('section').siblings('section')
.removeClass('active').find('i')
.removeClass('fa-minus').addClass('fa-plus');
});
<?php if( have_rows('about_content', 4) ): $i = 0; ?>
<div id="about" class="questions">
<div class="container">
<div id="section" class="row">
<div class="col-sm-12 accordion">
<?php while( have_rows('about_content', 4) ): the_row(); $i++; ?>
<section>
<div class="title"><i class="accordion_icon fa fa-plus"></i>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i; ?>"><?php the_sub_field('title'); ?>
</div>
<div class="row"><div class="col-sm-10">
<p class="excerpt"><?php the_sub_field('sub_title'); ?></p></a>
<div id="collapse-<?php echo $i; ?>" class="panel-collapse collapse accordion-content">
<?php the_sub_field('expanded_copy'); ?>
<?php
while(has_sub_field("flexible_content")): ?>
<?php if(get_row_layout() == "two_column_row"): // layout: Content ?>
<div class="row">
<div class="col-sm-6">
<strong><?php the_sub_field("left_column_title"); ?></strong>
<?php the_sub_field("left_column_list"); ?>
</div>
<div class="col-sm-6">
<strong><?php the_sub_field("right_column_title"); ?></strong>
<?php the_sub_field("left_column_list"); ?>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div></div>
</section>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment