Inside Tabs – ACF Boot – Bootstrap Material Library with ACF integration.

A0010

Expand

Code With ACF Integration

HTML

<!-- A0010 ------------------------------------------------>
<section id="a0010">
	<div class="container">
		<ul class="nav wa_a10_nav mb-3" id="pills-tab" role="tablist">
			<?php if ( have_rows( 'a0010' ) ) : ?>
			<?php $n = 0; ?>
				<?php while ( have_rows( 'a0010' ) ) : the_row();?>
				<?php 
					if ($n == 0){
						$act = ' active';
						$prof = 'home';
						$selected = 'true';
						$wa_bor = '';
					}else{
						$act = '';
						$prof = 'profile';
						$selected = 'false';
						$wa_bor = ' wa_bor';
					}
				?>
			<li class="nav-item<?php echo $wa_bor; ?>">
				<a class="nav-link<?php echo $act; ?> wa_a10_link" id="pills-<?php echo $prof; ?>-tab" data-toggle="pill" href="#pills-<?php echo get_row_index(); ?>" role="tab" aria-controls="pills-<?php echo get_row_index(); ?>" aria-selected="<?php echo $selected; ?>"><?php echo get_sub_field('nav_title'); ?></a>
			</li>
				<?php $n++; 
				?>
				<?php endwhile; ?> 
			<?php endif; ?>
		</ul>
		<div class="tab-content" id="pills-tabContent">	
			<?php if ( have_rows( 'a0010' ) ) : ?>
			<?php 
				$n = 0; 
			?>
				<?php while ( have_rows( 'a0010' ) ) : the_row();?>
				<?php 
					if ($n == 0){
						$act = ' active';
						$show = ' show';
					}else{
						$act = '';
						$show = '';
					}
				?>
			<div class="tab-pane fade<?php echo $show; ?><?php echo $act; ?>" id="pills-<?php echo get_row_index(); ?>" role="tabpanel" aria-labelledby="pills-<?php echo get_row_index(); ?>">
				<h2><?php echo get_sub_field('title'); ?></h2>
				<h3><?php echo get_sub_field('subtitle'); ?></h3>
				<hr />
				
				<?php echo get_sub_field('content'); ?>
				<div class="row">
					<?php 
					if (get_sub_field('image_left') != ''){echo '<div class="col-12 col-md-4 mt-4" align="center"><img src="'.get_sub_field('image_left').'" class="wa_a10_img"></div>';}
					if (get_sub_field('image_center') != ''){echo '<div class="col-12 col-md-4 mt-4" align="center"><img src="'.get_sub_field('image_center').'" class="wa_a10_img"></div>';}
					if (get_sub_field('image_right') != ''){echo '<div class="col-12 col-md-4 mt-4" align="center"><img src="'.get_sub_field('image_right').'" class="wa_a10_img"></div>';}
					?>
				</div>
			</div>
				<?php 
				$n++;
				?>
				<?php endwhile; ?> 
			<?php endif; ?>
		</div>
	</div>
</section>
<!-- A0010 END ------------------------------------------------>

CSS

/* A0010 ------------------------------------------------------*/

#a0010{
	margin-top: 20px;
}
#a0010 .wa_a10_nav{
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
#a0010 .wa_a10_link{
	color: #798093;
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
	padding: 0px 20px;
}
#a0010 .wa_a10_link:hover{
	color: #FF5722;
}
#a0010 .nav-item .active{
	color: #FF5722;
}
#a0010 .wa_bor{
	color: #798093;
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
    border-left: solid 1px #798093;
}
#a0010 h2{
	font-family: 'Oswald', sans-serif;
	text-align: center;
}
#a0010 h3{
    text-align: center;
    font-family: sans-serif;
    font-size: 24px;
	margin-top: 20px;
}
#a0010 h4{
    text-align: center;
    font-family: sans-serif;
    font-size: 22px;
	margin-top: 20px;
}
#a0010 .wa_a10_img{
	border: solid 2px #607D8B;
    border-radius: 5px;
}
/* A0010 END -------------------------------------------------------*/

Code Only (Without ACF Integration)

HTML

<!-- A0010 ------------------------------------------------>
<section id="a0010">
	<div class="container">
		<ul class="nav wa_a10_nav mb-3" id="pills-tab" role="tablist">
			<li class="nav-item">
				<a class="nav-link active wa_a10_link" id="pills-home-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="true">Content1</a>
			</li>
			<li class="nav-item wa_bor">
				<a class="nav-link wa_a10_link" id="pills-profile-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Content2</a>
			</li>
			<li class="nav-item wa_bor">
				<a class="nav-link wa_a10_link" id="pills-profile-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="false">Content3</a>
			</li>
		</ul>
		<div class="tab-content" id="pills-tabContent">	
			<div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1">
				<h2>Title</h2>
				<h3>Subtitle</h3>
				<hr />
				Content
				<div class="row">
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					?>
				</div>
			</div>
			<div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2">
				<h2>Title</h2>
				<h3>Subtitle</h3>
				<hr />
				Content
				<div class="row">
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					?>
				</div>
			</div>
			<div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3">
				<h2>Title</h2>
				<h3>Subtitle</h3>
				<hr />
				Content
				<div class="row">
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					<div class="col-12 col-md-4 mt-4" align="center"><img src="IMAGE URL" class="wa_a10_img"></div>
					?>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- A0010 END ------------------------------------------------>

CSS

/* A0010 ------------------------------------------------------*/

#a0010{
	margin-top: 20px;
}
#a0010 .wa_a10_nav{
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
#a0010 .wa_a10_link{
	color: #798093;
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
	padding: 0px 20px;
}
#a0010 .wa_a10_link:hover{
	color: #FF5722;
}
#a0010 .nav-item .active{
	color: #FF5722;
}
#a0010 .wa_bor{
	color: #798093;
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
    border-left: solid 1px #798093;
}
#a0010 h2{
	font-family: 'Oswald', sans-serif;
	text-align: center;
}
#a0010 h3{
    text-align: center;
    font-family: sans-serif;
    font-size: 24px;
	margin-top: 20px;
}
#a0010 h4{
    text-align: center;
    font-family: sans-serif;
    font-size: 22px;
	margin-top: 20px;
}
#a0010 .wa_a10_img{
	border: solid 2px #607D8B;
    border-radius: 5px;
}
/* A0010 END -------------------------------------------------------*/

Image size: 387px X 253px

BC9 -- 5 item option block

Expand

Code With ACF Integration

HTML

<!-- BC9 -- 5 item option block ---------------------------->
<?php if ( have_rows( 'bc9' ) ) : ?>
	<?php while ( have_rows( 'bc9' ) ) : the_row();?>
	<?php
		$header = get_sub_field('header');
	?>
<section id="wa_bc9">
	<div class="container">
		<div class="row">
			<div class="col-12 mt-4">
				<h2><?php echo $header; ?></h2>
			</div>
		</div>
		<ul class="nav nav-pills wa_allpils mb-3" id="pills-tab" role="tablist">
		  	<?php
			$act = " active";
			$select = "true";
			$dynamoid = 1;
		if ( have_rows( 'items' ) ) : 
		   while ( have_rows( 'items' ) ) : the_row();
			?>
		  <li class="nav-item wa_item">
			<a class="nav-link wa_item_link<?php echo $act; ?>" id="pills-<?php echo $dynamoid; ?>-tab" data-toggle="pill" href="#pills-<?php echo $dynamoid; ?>" role="tab" aria-controls="#pills-<?php echo $dynamoid; ?>" aria-selected="<?php echo $select; ?>"><h3><?php echo get_sub_field('title_t'); ?></h3><h4><?php echo get_sub_field('title_b'); ?></h4></a>
		  </li>
			<?php 
				$select = "false";
				$act = "";
				$dynamoid++;
			?>
			<?php endwhile; ?> 
		<?php endif; ?>
		</ul>
		<div class="tab-content" id="pills-tabContent" style="padding-left: 0; border-top: solid 1px #f79435;">  
		 <?php
			$show = " show";
			$act = " active";
			$select = "true";
			$dynamoid = 1;
		if ( have_rows( 'items' ) ) : 
		   while ( have_rows( 'items' ) ) : the_row(); ?>
			
		  <div class="tab-pane fade<?php echo $show; echo $act; ?>" id="pills-<?php echo $dynamoid; ?>" role="tabpanel" aria-labelledby="pills-<?php echo $dynamoid; ?>-tab">
			<div class="row wa_content">
				<div class="col-12 col-lg-6">
					<div class="wa_text_wrap">
						<?php echo get_sub_field('content'); ?>
					</div>
					<img src="<?php echo get_sub_field('image_left'); ?>" />
				</div>
				<div class="col-12 col-lg-6">
					<img src="<?php echo get_sub_field('image_right'); ?>" />
				</div>
			</div>
		  </div>
			<?php 
				$select = "false";
				$act = "";
				$show = "";
				$dynamoid++;
			?>
			<?php endwhile; ?> 
		<?php endif; ?>
		</div>
	</div>
</section>

	<?php endwhile; ?> 
<?php endif; ?>
<!-- BC9 END ------------------------------------------------>

CSS

/*-- BC9 -- 5 item option block ----------------------------*/
#wa_bc9{
	margin-top: 50px;
}
#wa_bc9 h2{
	font-family: 'Teko', sans-serif;
    color: #798093;
    text-align: center;
    font-size: 4em;
    font-weight: 200;
	line-height: 55px;
}
#wa_bc9 ul{
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}
#wa_bc9 .wa_item{
	
}
#wa_bc9 .wa_item .wa_item_link{
    padding: 5px;
    background-color: #F79435;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 1.5em;
    text-transform: uppercase;
    color: #FFF;
    
	width: 70px;
    margin-top: 20px;
}
#wa_bc9 .wa_item .wa_item_link h3{
	color: #FFF;
    text-align: center;
    font-family: 'Teko', sans-serif;
    margin-bottom: 0;
	
    margin-top: 5px;
	font-size: 0.9em;
}
#wa_bc9 .wa_item .wa_item_link h4{
    color: #fff;
    text-align: center;
    font-family: 'Teko', sans-serif;
    font-size: 1.9em;
    font-weight: 200;
    margin-top: -10px;
    margin-bottom: 0;
	
	display: none;
}
#wa_bc9 .nav-pills .wa_item_link.active {
	
}
#wa_bc9 .wa_content .wa_text_wrap h2{
	font-family: inherit;
    font-size: 2em;
    font-weight: 700;
    color: #000;
    text-align: left;
}
#wa_bc9 .wa_content .wa_text_wrap img{
	margin-top: 20px;
}
#wa_bc9 .wa_content .wa_text_wrap{
	min-height: 180px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	#wa_bc9 .wa_item .wa_item_link{
		width: 120px;
		height: 120px;
	}
	#wa_bc9 .wa_item .wa_item_link h3{
		color: #000;
		margin-top: 10px;
		font-size: 1.8em;
	}
	#wa_bc9 .wa_item .wa_item_link h4{
		display: block;
	}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
		
}
/*-- BC9 -- END ----------------------------*/

Image left is around 512 by 276 pixels

Image right is around 468 by 538 pixels

Image sizes can be flexible.

A0097

Expand

Code With ACF Integration

HTML

<!-- A0097 ------------------------------------------------>
<?php if (have_rows('a0097')) : ?>
<section id="a0097">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="a0097-panels-grid">
                    <?php
                    $arrayIDS = array();
                    while (have_rows('a0097')) : the_row();
                        $id = get_sub_field('id');
                        if (get_sub_field('opened')) {
                            array_push($arrayIDS, $id);
                        }
                        ?>
                        <div>
                        <div class="a0097-panel">
                            <div id="<?php echo $id; ?>" onclick="PanelClick('<?php echo $id; ?>')"
                                 class="a0097-panel-top">
                                <div><img src="<?php echo get_sub_field('icon'); ?>"></div>
                                <div><?php echo get_sub_field('title'); ?></div>
                                <div><span class="a0097-mns">-</span> <span class="a0097-pls">+</span></div>
                            </div>
                            <div id="<?php echo $id; ?>-inner" class="a0097-panel-inner">
                                <p><?php echo get_sub_field('description'); ?></p>
                                <?php if (get_sub_field('link') != "") : ?>
                                    <a href="<?php echo get_sub_field('link_url'); ?>"><?php echo get_sub_field('link'); ?>
                                        <img src="/wp-content/themes/ua0/images/go.svg"></a>
                                <?php endif; ?>
                            </div>
                        </div>
                        </div>
                    <?php endwhile; ?>
            </div>
        </div>
        </div>
    </div>
    <script>
        <?php
        foreach ($arrayIDS as $id_show) {
            echo "PanelClick('" . $id_show . "');";
        }
        ?>
        function PanelClick(id) {
            $("#" + id + "-inner").toggle();
            if ($("#" + id + "-inner").is(":visible")) {
                $("#" + id + " .a0097-pls").hide();
                $("#" + id + " .a0097-mns").show();
            } else {
                $("#" + id + " .a0097-pls").show();
                $("#" + id + " .a0097-mns").hide();
            }
        }
    </script>
</section>
<?php endif; ?>
<!-- A0097 END ------------------------------------------------>

CSS

/* A0097 -----------------------------------------------------------*/
#a0097{
    margin-top: -20px;
}

.a0097-panel{
    background: #FFFFFF;
    border: 1px solid #D72323;
    box-sizing: border-box;
}

.a0097-panel-top {
    background: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    font-family: Scada;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    color: #D72323;
    display: grid;
    grid-template-columns: 45px 1fr 20px;
    grid-gap: 20px;
    align-items: center;
    padding: 15px;
    cursor: pointer;
}

.a0097-panel-inner{
    border-top: 1px solid #D72323;
    padding: 15px;
    font-family: Yantramanav;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 136%;
    color: #3A4750;
    display: none;
}

.a0097-mns{
    display: none;
}

.a0097-panel-inner a{
    font-family: Scada;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    align-items: center;
    color: #D72323;
}

.a0097-panels-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 25px;
    width: 100%;
    margin: auto;
}

@media (max-width: 992px) {
    .a0097-panels-grid {
        grid-template-columns: 1fr;
    }
}

/* A0097 end -------------------------------------------------------*/

A0106

Expand

To view please

Login

or

Join now!

A0110

Expand

To view please

Login

or

Join now!

A0163

Expand

To view please

Login

or

Join now!