Add Vertical Information or FAQ Tabs

What does this code do?

This code snippet will allow you to add buttons that show different paragraphs of information when clicked.

Try Me!

This is the title.

This is a description. This is a description. This is a description. This is a description. This is a description. This is a description.

Learn More

Or Me!

This is another title.

This is another description. This is a description. This is a description. This is a description. This is a description. This is a description.

Learn More

No, me!

This is a third title.

This is a third description. This is a description. This is a description. This is a description. This is a description. This is a description.

Learn More

Video Tutorial

Code Snippets

HTML

Copy and paste this code into a Code Block on your website.

<div class="vertical-tabs">
  <div class="tab-wrapper">
    <div class="tab-left">
      <button class="tab-links active" onclick="clickHandle(event, 'tab1')">This is my first question. + </button>
    </div>
    <div class="tab-right">
      <div id="tab1" class="tab-content">
        <h4>This is the title.</h4>
        <p>This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. </p>
        <a href="/news">Learn More</a>
      </div>
    </div>
  </div>

  <div class="tab-wrapper">
    <div class="tab-left">
      <button class="tab-links" onclick="clickHandle(event, 'tab2')">This is my second question. + </button>
    </div>
    <div class="tab-right">
      <div id="tab2" class="tab-content">
        <h4>This is another title.</h4>
        <p>This is another description. This is a description. This is a description. This is a description. This is a description. This is a description. </p>
        <a href="/news">Learn More</a>
      </div>
    </div>
  </div>

  <div class="tab-wrapper">
    <div class="tab-left">
      <button class="tab-links" onclick="clickHandle(event, 'tab3')">This is my third question. + </button>
    </div>
    <div class="tab-right">
      <div id="tab3" class="tab-content">
        <h4>This is a third title.</h4>
        <p>This is a third description. This is a description. This is a description. This is a description. This is a description. This is a description. </p>
        <a href="/news">Learn More</a>
      </div>
    </div>
  </div>
</div>

This code is for three tabs. Feel free to add or delete tabs.

Javascript

Copy and paste this code into the Footer Code Injection.

<!-- Vertical Tabs -->
<script>
// Sets the first tab to active on page load
var tab1 = document.getElementById("tab1").style.display = "block";
  
function clickHandle(evt, tabID) {
  let i, tabcontent, tablinks;

  // This is to clear the previous clicked content.
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Set the tab to be "active".
  tablinks = document.getElementsByClassName("tab-links");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Display the clicked tab and set it to active.
  document.getElementById(tabID).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

CSS

Then copy and paste this code into the Custom CSS.

/* Vertical Tabs */
.tab-wrapper {
  display: flex;
  flex-direction: row;
}

.tab-left {
  display: flex;
  flex-direction: column;
  width: 40%; // width of space for tab buttons
  overflow: hidden;
}

.tab-left button {
  border: none !important;
  background: rgba(0,0,0,0) !important;
  cursor: pointer;
  padding: 10px; //space around text on left
  transition: 0.3s;
  text-align: left; // text on left is left aligned
  font-size: 1.4rem; //font size of text on left
  color: #595959; // color of text on left
}

.tab-left button:hover {
   font-style: italic; //text on left go italic on hover
}

.tab-left button.active {
  text-decoration: underline; //active tab is underlined
  color: black; // active tab font folor
}

.tab-right {
  width: 60%; //width of tab content
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
}

.tab-content {
  display: none;
  padding: 0 10px 0 20px; //space around tab content
}

.tab-content a {
  display: block;
  background: grey; //color of button
  padding: 1em 2em; //spacing in button text
  width: fit-content;
  color: white; //color of button text
}

.tab-content a:hover {
  opacity: 0.8; // hover effect on button
}

// tabs under question on mobile
@media only screen and (max-width: 640px) {
  .tab-wrapper {
    display: block;
  }
  .tab-left{
    width: 100%; // width of space for tab buttons
  }
  .tab-right {
    position: relative;
    width: 100%; //width of tab content
  }
}

You can then adjust the spacing, colors, and hover effects.

How To Use It

1. Copy and paste the code as indicated above.

2. For more information on where to paste the code, check out our Start Here guide.

3. Edit the colors, spacing, and hover effects.