magicdustwebsites of Magicdust
7/22/2016 - 3:26 PM

Tabs

Tabs

<?php if ( have_rows( 'tabs' ) ) : wp_enqueue_script( 'cascade-tabs' ); ?>
	<div class="tabs">
		<ul class="tabs__tablist" role="tablist">
			<?php while ( have_rows( 'tabs' ) ) : the_row(); $key = sanitize_title( get_sub_field( 'label' ) ); ?>
				<li role="presentation">
					<a class="tabs__tab" href="#<?php echo $key; ?>" role="tab" aria-controls="<?php echo $key; ?>">
						<?php the_sub_field( 'label' ); ?>
					</a>
				</li>
			<?php endwhile; ?>
		</ul>

		<?php while ( have_rows( 'tabs' ) ) : the_row(); $key = sanitize_title( get_sub_field( 'label' ) ); ?>
			<a class="tabs__tab" href="#<?php echo $key; ?>" role="tab" aria-controls="<?php echo $key; ?>">
				<?php the_sub_field( 'label' ); ?>
			</a>

			<div id="<?php echo $key; ?>" role="tabpanel" class="tabs__panel">
				<!-- Tab contents -- >
			</div>
		<?php endwhile; ?>
	</div>

	<script>
		jQuery( document ).ready( function() {
			jQuery( '.tabs' ).cascadeTabs();
		} );
	</script>
<?php endif; ?>