WP: 7. Control Tab on frontend with ACF[Solved]

Today I ran into a problem, I needed to implement tabs on the front end with ACF dynamically and found this solution.

And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy.

Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever.

Step 1: Execute loop first for tab navigation

<?php $i=1; while(have_rows('data')) : the_row(); ?>

<button class="nav-item nav-link <?php if($i==1){echo "active";}?>" data-bs-toggle="tab" data-bs-target="#tab<?php echo $i;$i++;?>">

</button>

<?php endwhile;?>

Step 2: Execute second loop for tab content

<?php

$i=1;

while(have_rows('data')) : the_row();

$tab_image = get_sub_field('tab_image');

<div id="tab<?php echo $i;?>" class="tab tab-pane <?php if($i==1){echo "active show";}$i++;?>fade show">

<img src="<?php echo $tab_image['url']; ?>" alt="" class="s-floorplan__img">

</div>

<?php endwhile;?>

Now Cheers !😊

Comments

React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the react-cookie in your project npm install react-cookie Step2: Add the following code in index.js import { CookiesProvider } from "react-cookie"; ReactDOM.render( <CookiesProvider> <App /> </CookiesProvider>, document.getElementById('root') ); Step3: Add the following code in your component import React, { useState } from 'react'; import { useCookies } from 'react-cookie'; const App = () => { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [cookies, setCookie] = useCookies(['user']); const handle = () => { setCooki...

React: Print Specific Section of the page with - ReactToPrint

Want to know how can you easily print specific section of your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the ReactToPrint in your project npm install --save react-to-print Step2: Add the following code in your component import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; const Example = () => { const componentRef = useRef(); return ( <div> <ReactToPrint trigger={() => <button>Print this out!</button>} content={() => componentRef} ...

JS: Cheatsheet

Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS

Coding Archives

Search This Blog