Copy Code

                  
CSS:
<style>
.sidetabs-section {
    padding: 4em 0;
}
.sidetabs-section h2 {
    margin-bottom: 3em;
}
.deal-tabs .tab {
  float: left;
  background-color: #f1f1f1;
  width: 30%;
  height: auto;
}
.deal-tabs .tab button {
  display: block;
  background-color: #fff;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 36px;
  font-weight: 800;
}
.deal-tabs .tab button:last-child {
    border-bottom: none;
}
.deal-tabs .tab button:hover {
  background-color: #fff;
  color: var(--tab-color, #fff);
}
.deal-tabs .tab button.active {
  background-color: #fff;
  color: var(--tab-color, #fff);
}
.deal-tabs .tabcontent {
  float: left;
  padding: 15px;
  border: 15px solid;
  width: 68%;
  height: auto;
  border-radius: 10px;
  margin-left: 20px;
}
#One {
    border-color: cadetblue;
}
#Two {
    border-color: brown;
}
#Three {
    border-color: tomato;
}
#Four {
    border-color: steelblue;
}
.codebox {
    padding: 4em 0;
    background-color: #f5f5f5;
}
.codebox h2 {
    margin-bottom: 3em;
}
.codebox button {
    position: absolute;
    right: 2em;
    top: 3em;
}
.codebox .btn-cta {
    border-color: #00e5db;
}
#codeBlock {
    position: relative;
}
pre {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 1rem 2rem;
  overflow-x: auto;
  border-radius: 20px;
  font-size: 14px;
}
code {
  font-family: Consolas, Monaco, "Courier New", monospace;
}

@media (max-width: 1199px) {
.deal-tabs .tabcontent {
    width: 67%;
}
}

@media (max-width: 991px) {
.deal-tabs .tab {
    float: none;
    width: 100%;
}
.deal-tabs .tabcontent {
    float: none;
    width: 100%;
    margin-left: 0;
}
}
</style>

HTML:

<div class="sidetabs-section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="deal-tabs">
  <div class="tab hidden-sm hidden-xs">
    <button class="tablinks" onclick="openDeal(event, 'One')" id="defaultOpen">Title One</button>
    <button class="tablinks" onclick="openDeal(event, 'Two')">Title Two</button>
    <button class="tablinks" onclick="openDeal(event, 'Three')">Title Three</button>
    <button class="tablinks" onclick="openDeal(event, 'Four')">Title Four</button>
  </div>

  <div class="tab visible-sm visible-xs">
    <button class="tablinks" onclick="openDeal(event, 'One')" id="defaultOpen">Title One</button>
  </div>

  <div id="One" class="tabcontent">
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis consequuntur corporis optio quibusdam, asperiores quae eius officia eos fugit harum. Veritatis magni nam eligendi natus maxime.</p>
  </div>

  <div class="tab visible-sm visible-xs">
    <button class="tablinks" onclick="openDeal(event, 'Two')">Title Two</button>
  </div>

  <div id="Two" class="tabcontent">
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis consequuntur corporis optio quibusdam, asperiores quae eius officia eos fugit harum. Veritatis magni nam eligendi natus maxime.</p>
  </div>

  <div class="tab visible-sm visible-xs">
    <button class="tablinks" onclick="openDeal(event, 'Three')">Title Three</button>
  </div>

  <div id="Three" class="tabcontent">
    <p>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis consequuntur corporis optio quibusdam, asperiores quae eius officia eos fugit harum. Veritatis magni nam eligendi natus maxime.</p>
  </div>

  <div class="tab visible-sm visible-xs">
    <button class="tablinks" onclick="openDeal(event, 'Four')">Title Four</button>
  </div>

  <div id="Four" class="tabcontent">
    <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis consequuntur corporis optio quibusdam, asperiores quae eius officia eos fugit harum. Veritatis magni nam eligendi natus maxime.</p>
  </div>

</div>
      </div>
    </div>
  </div>
</div>

JS:
<script>
function openDeal(evt, dealName) {
  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].classList.remove("active");
  }

  const activeContent = document.getElementById(dealName);
  activeContent.style.display = "block";

  const borderColor = getComputedStyle(activeContent).borderColor;

  // Assign color to hovered & active states
  evt.currentTarget.style.setProperty("--tab-color", borderColor);
  evt.currentTarget.classList.add("active");
}

// Set hover colors on page load
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".tablinks").forEach(button => {
    const dealName = button.getAttribute("onclick").match(/'(.+?)'/)[1];
    const content = document.getElementById(dealName);
    const color = getComputedStyle(content).borderColor;

    button.style.setProperty("--tab-color", color);
  });

  document.getElementById("defaultOpen").click();
});
</script>