Tutorial & code

Horizontal Tabs

This uses the Beaver Builder HTML module and custom HTML, CSS and JS. It was adapted from W3 Schools.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Modules Nav

Video

Bb Vid Cs

Notes

Coming!

See the Horizontal Tabs template in action.

Code

HTML

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"> TAB ONE</button>
<button class="tablinks" onclick="openCity(event, 'two')">TAB TWO</button>
<button class="tablinks" onclick="openCity(event, 'three')">TAB THREE</button>
<button class="tablinks" onclick="openCity(event, 'four')">TAB FOUR</button>
</div>

<div id="one" class="tabcontent">
<h3>Header for tab one</h3>
<p> This tab is open by default, buton only because this:
<br> id="defaultOpen" has been added to the button.
<br>
<br> You could use it to open another tab or remove to have nothing open.
</p>
<p>Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. 
Varius vel pharetra vel turpis nunc. Ut consequat semper viverra nam libero justo.
Et egestas quis ipsum suspendisse ultrices gravida dictum.</p>
</div>

<div id="two" class="tabcontent">
<h3>Header</h3>
<p>Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. 
Vitae congue eu consequat ac felis donec et odio pellentesque. 
Risus pretium quam vulputate dignissim suspendisse in est. Massa sed elementum tempus egestas sed sed. Sed vulputate
odio ut enim blandit. Lorem dolor sed viverra ipsum nunc aliquet bibendum.</p>

<p>Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. 
Varius vel pharetra vel turpis nunc. Ut consequat semper viverra nam libero justo.
Et egestas quis ipsum suspendisse ultrices gravida dictum.</p>
</div>

<div id="three" class="tabcontent">
<h3>This is my  tab three header</h3>
<img class="wp-image-19639"
src="https://designs.beaverjunction.com/wp-content/uploads/TypeFun-BG-600x313.jpg" alt="Typefun Bg" width="600" height="313" />

<p>I created this with a text module and copied the content into my html section here. <br>
I did need to add the p tag as this is removed from WordPress.

</p>
</div>

<div id="four" class="tabcontent">
<h3>Header</h3>
<p>Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. 
Vitae congue eu consequat ac felis donec et odio pellentesque. 
Risus pretium quam vulputate dignissim suspendisse in est. Massa sed elementum tempus egestas sed sed. Sed vulputate
odio ut enim blandit. Lorem dolor sed viverra ipsum nunc aliquet bibendum.</p>

<p>Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. 
Varius vel pharetra vel turpis nunc. Ut consequat semper viverra nam libero justo.
Et egestas quis ipsum suspendisse ultrices gravida dictum.</p>
</div>

CSS

/* Style the tab */
.tab {
overflow: hidden;
background-color: transparent;
}

/* Style the buttons inside the tab */
.tab button {
background-color: #000;
color:#fff;
float: left;
border: 0;
margin-right: 2px;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
border-radius: 4px 4px 0 0;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #333;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ffc719;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 20px;
border: 1px solid #CCC;
background-color: #F0F0F0;
margin-top: 2px;
}

.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

.tabcontent H3
{
text-transform: uppercase;
font-size: 22px;
font-weight: bold;
padding: 10px 0;
}

p{
padding: 20px 0;
}

JavaScript

function openCity(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
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(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment