Starter for styled bootstrap panels.

accordion-php.php

<?php if(get_sub_field('accordion_section')) : $i = 0; ?>
<section class="panels-wrapper">
<?php while(has_sub_field('accordion_section')) : $i++; ?>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">
        
          <?php
          // panel link conditions
          if(get_sub_field('accordion_copy')) { ?>
            <a data-parent="#accordion" href="#panel-<?php echo $i; ?>" class="collapsed" data-toggle="collapse"><?php the_sub_field('accordion_title'); ?></a>
          <?php } else { ?>
            <?php the_sub_field('accordion_title'); ?>
          <?php } ?>
           
        </div>
      </div>
      <div id="panel-<?php echo $i; ?>" class="panel-collapse collapse">
        <div class="panel-body">
          <?php 
          // If the layout has an image:
          if(get_sub_field('accordion_image')) : ?>
            <figure>
              <?php // ACF Image Object
              $image = get_sub_field('accordion_image');
              $alt = $image['alt'];
              $imageLarge = $image['sizes'][ 'large' ]; ?>
              <img src="<?php echo $imageLarge; ?>" alt="<?php echo $alt; ?>" />
            </figure>
  
            <article class="bio-with-image">
              <?php the_sub_field('accordion_copy'); ?>
            </article>
            
          <?php 
          // If the layout is just text:
          else : ?>
            <article class="bio">
              <?php the_sub_field('accordion_copy'); ?>
            </article>
  
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
<?php endwhile; ?>
</section>
<?php endif; // Repeater ?>

accordion-style.less

// Accordion
// =========

section.panels-wrapper {
  .panel-group {
    .panel-heading {
      p {
        margin: 0;
        font-size: 22px;
      }
    }
    .panel-title  {
      a {
        p {
          color: @orange;
        }
        &:before {
          float: left;
          padding: 5px 10px 0 2px;
          display: inline-block;
          font-family: FontAwesome;
          content: "\f063";
          font-size: (@font-size-base - 4);;
          font-style: normal;
          font-weight: normal;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          color: @orange;
        }
        &.collapsed {
          p, &:before {
            color: @text-color;
          }
        }
      }
    }
    &:last-of-type {
      border-bottom: 1px solid lighten(@text-color, 20%);
    }
    .panel-body {
      .make-row(@gutter: 50px);
    }
  }
  .bio {
    .make-md-column(12);

    @media screen and (min-width: @screen-md) {
      padding: 0 (@grid-gutter-width * 2);
    }
  }

  figure {
    .make-md-column(4, @gutter: 75px);
    overflow: hidden;
    margin-top: 2px;

    img {
      width: 100%;
      max-width: 100%;
    }
  }

  .bio-with-image {
    .make-md-column(8, @gutter: 0);
  }
}