About Tab
In WordPress or HTML sites people want to use “tabs”. This reduces page length and increases page attraction. Also tabs contents are very easy to read and fast. The following image shows the website Tabs.
Recently most WordPress websites are using Visual composer to build site page contents. This Visual composer has a Tab option and is very easy to use. The following image shows you about the visual composer Tab option.
Problem of Tab
Tabs are cool with Desktop. But not on mobile. This is a bad experience. Recently most visitors are coming via mobile. So mobile-friendly responsive elements are very valuable.
When someone clicks on the 2nd Tab, the 3rd one goes to the bottom. Also Clicked 3rd tab and now can’t see the 4th tab. This is the main issue of the Tab element.
Code Responsive two tab for WordPress visual composer.
For this design, You need to code 4 elements
- Two Buttons
- Two blocks (Row) by Visual composer
- Java script code
- CSS style
1. Creating two buttons:-
Add this code on “Raw HTML” block.
Button 1
<button style="background-color:#000000; color:#ffffff;" class="btn-tab1" onclick="openLoca(event, manali)" id="defaultOpen">Manali Location</button>
Button 2
<button style="background-color:#fde428; color:#000000;" class="btn-tab2" onclick="openLoca(event, delhi)" id="defaultOpen">Delhi Location</button>
2. Creating two rows:-
On WordPress visual composer, add “Row”. Open Row setting and add ID called “’manali”. Also add class as “shira-tab”. Save changes. Now you can add image, Content and Map or any content inside this Row.
Add second Row as 1st one. Here you need to add ID called “delhi” and add same class as “shira-tab”.
3. Adding Javascript code:-
Open “Raw Js” block and add this code. Don’t try to change this code. (If you want please learn javascript well) So copy this code and add it. Save changes.
<script>
function openLoca(evt, locaName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("shira-tab");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(locaName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
After all, update the page to save new tabs.
4. Adding CSS code:-
Now open custom setting in the left side panel. Open “Additional CSS” add this CSS code and save.
/* ---- Shira Tab ---*/
.shira-tab {
display: none;
}
.shiratab-center {text-align:center;}
/* --- tab end --*/
