Tab

×

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac quam maximus, volutpat nulla id, fringilla nibh. Cras non augue.

<div class="ss-bar ss-bg-black">
  <button class="ss-bar-item ss-button" onclick="openTab('T')">Tab 1</button>
  <button class="ss-bar-item ss-button" onclick="openTab('A')">Tab 2</button>
  <button class="ss-bar-item ss-button" onclick="openTab('B')">Tab 3</button>
</div>
<div id="T" class="ss-container ss-disp-container tab">
  <span onclick="this.parentElement.style.display='none'"
  class="ss-button ss-large ss-disp-topright">&times;</span>
  <h2>Tab 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac quam maximus, volutpat nulla id, fringilla nibh. Cras non augue.</p>
</div>
<div id="A" class="ss-container ss-disp-container tab" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="ss-button ss-large ss-disp-topright">&times;</span>
  <h2>Tab 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac quam maximus, volutpat nulla id, fringilla nibh. Cras non augue.</p> 
</div>
<div id="B" class="ss-container ss-disp-container tab" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="ss-button ss-large ss-disp-topright">&times;</span>
  <h2>Tab 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac quam maximus, volutpat nulla id, fringilla nibh. Cras non augue.</p>
</div>
function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(tabName).style.display = "block";  
}