FAQ with categories

<?php if ( have_rows( 'faqs', 'options' ) ) : ?>
	<?php $i = 1; while ( have_rows( 'faqs', 'options' ) ) :
		the_row(); ?>
		
		<?php if ( $faq_title = get_sub_field( 'faq_title', 'options' ) ) : ?>
			<a class='btn btn-l mb' href='#<?php echo $i; ?>'><?php echo esc_html( $faq_title ); ?></a>
		<?php endif; ?>


	<?php $i++; endwhile; ?>
<?php endif; ?>

<?php if ( have_rows( 'faqs', 'options' ) ) : ?>
	<?php $i = 1; while ( have_rows( 'faqs', 'options' ) ) :
		the_row(); ?>
		
		<div id='<?php echo $i; ?>'>
		<?php if ( $faq_title = get_sub_field( 'faq_title', 'options' ) ) : ?>
			<h2 class='h2 mb-x'><?php echo esc_html( $faq_title ); ?></h2>
		<?php endif; ?>

		<div class='mb-xl'>
		<?php if ( have_rows( 'faq_faqs', 'options' ) ) : ?>
		<?php while ( have_rows( 'faq_faqs', 'options' ) ) :
		the_row(); ?>

		<div class='h-faq-item'>
          
		<a class='h-faq'>
		<?php if ( $faq_question = get_sub_field( 'faq_question', 'options' ) ) : ?>
			<h4 class='h4 h-faq-q'><?php echo esc_html( $faq_question ); ?></h4>
		<?php endif; ?>
          
		<i class="faq-i fal fa-angle-down"></i>          
		</a>
          
		<div class='h-faq-co'>
		<?php if ( $faq_answer = get_sub_field( 'faq_answer', 'options' ) ) : ?>
			<?php echo $faq_answer; ?>
		<?php endif; ?>
		</div>
          
		</div>

		<?php endwhile; ?>
		<?php endif; ?>
		</div>
		</div>	

	<?php $i++; endwhile; ?>
<?php endif; ?>




<script>

jQuery('.h-faq').click(function(e) {
  e.preventDefault();

  var $this = jQuery(this);

  $this.next().slideToggle(400);
  $this.find('.faq-i').toggleClass('faq-i-open');
  jQuery(this).toggleClass('h-faq-open');
});
	

  
</script>





<style>

.faq-i {
  font-size: 27px;	
  transition: 0.2s;
}
.faq-i-open { 
  -webkit-transform: rotate(180deg);
}
.h-faq-open { 
  color: #197df5 !important;
} 	
.h-faq-co { 
  display: none;
}  
  
  
</style>