Support

Account

Home Forums Add-ons Repeater Field Boostrap Tabs via ACF

Unread

Boostrap Tabs via ACF

  • I’m trying to integrate Bootstrap Tabs with ACF.

    But how should I pull data when I create more than one tab?

    When I use a tab at this time I can pull in this way but when I use more than one, how should I do?

    How do I create a loop to use multiple tabs?

    How to pull Tab links and content?

    Front-end Codes

    	<!-- tab start -->
    	<div class="row mar0 tabrk">
    		<ul class="tabnav nav-pills">
    			<li class="active"><a data-toggle="pill" href="#home"><img class="img-responsive" src="logo.png"></a></li>
    			<li><a data-toggle="pill" href="#menu1"><img class="img-responsive" src="logo.png"></a></li>
    		</ul>
    		<div class="tabbody tab-content">
    			<div id="home" class="tab-pane fade in active">
    				<ul>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #ecb319;">
    								<a href="#">
    									<img class="media-object" src="images/marka/1.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #ecb319;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #a8bbe1;">
    								<a href="#">
    									<img class="media-object" src="images/marka/2.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #a8bbe1;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #3dd0d9;">
    								<a href="#">
    									<img class="media-object" src="images/marka/3.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #3dd0d9;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #8a8065;">
    								<a href="#">
    									<img class="media-object" src="images/marka/4.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #8a8065;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #a4d46b;">
    								<a href="#">
    									<img class="media-object" src="images/marka/5.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #a4d46b;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #164f9c;">
    								<a href="#">
    									<img class="media-object" src="images/marka/6.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #164f9c;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color:#f0441c;">
    								<a href="#">
    									<img class="media-object" src="images/marka/7.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #f0441c;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: #9c6cb2;">
    								<a href="#">
    									<img class="media-object" src="images/marka/8.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #9c6cb2;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color:#17dfc0; ">
    								<a href="#">
    									<img class="media-object" src="images/marka/9.png">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: #17dfc0;">Asset Management</h4>
    								Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.
    
    							</div>
    						</div>
    					</li>
    				</ul>
    			</div>
    			<div id="menu1" class="tab-pane fade">
    				<h3>Menu 1</h3>
    				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    			</div>
    
    		</div>
    	</div>
    	<!-- tab end -->

    Now:

    	<!-- tab start -->
    	<div class="row mar0 tabrk">
    		<ul class="tabnav nav-pills">
    			 	<?php while(have_rows('tabs')) : the_row(); ?>
     <li class=""><a data-toggle="pill" href="#home"><img class="img-responsive" src="<?php the_sub_field('marka_logo'); ?>"></a></li>
    				<?php endwhile;?>
    		</ul>
    
    <?php // reset the rows of the repeater
      reset_rows(); ?>
    
    		<div class="tabbody tab-content">
    			<div id="home" class="tab-pane fade in active">
    				<ul>
    
    					  <?php while(have_rows('tabs')) : the_row('marka_ozellikler'); ?>
    					<li>
    						<div class="media">
    							<div class="media-left" style="border-color: <?php the_sub_field('marka_color'); ?>;">
    								<a href="#">
    									<img class="media-object" src="<?php the_sub_field('marka_sol_gorsel'); ?>">
    								</a>
    							</div>
    							<div class="media-body">
    								<h4 class="media-heading" style="color: <?php the_sub_field('marka_color'); ?>;"><?php the_sub_field('marka_baslik'); ?></h4>
    								<?php the_sub_field('marka_aciklama'); ?>
    
    							</div>
    						</div>
    					</li>
    				<?php endwhile; ?>
    
    				</ul>
    
    			</div>
    		</div>
    	</div>
    	<!-- tab end -->

    What I Want

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.