Expanding Tabs

HTML, CSS, JS

by Ovi Stof

HTML

<h1>Expanding Tabs</h1>
<div class="rind_adm">
  <div class="col_adm" onclick="deschid_tab('tab1');">
    <p>OPTION 1<span class="br_resp"><br></span> (some text...)</p>
  </div>
  <div class="col_adm" onclick="deschid_tab('tab2');">
    <p>OPTION 2<span class="br_resp"><br></span> (some text...)</p>
  </div>
  <div class="col_adm" onclick="deschid_tab('tab3');">
    <p>OPTION 3<span class="br_resp"><br></span> (some text...)</p>
  </div>
  <div class="col_adm" onclick="deschid_tab('tab4');">
    <p>OPTION 4<span class="br_resp"><br></span> (some text...)</p>
  </div>
</div>
<div id="tab1" class="lada_adm">
  <span onclick="this.parentElement.style.display='none'" class="btn_inchid">&times;</span>
  <h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
  <ul>
    <li>Proin tincidunt feugiat consectetur.</li>
    <li>Nulla condimentum tellus quam, nec sodales enim elementum eu.</li>
    <li>Nam sed accumsan est, at tincidunt ante.</li>
    <li>Morbi tempor neque vitae consequat elementum.</li>
    <li>Nam in congue nibh, nec feugiat arcu.</li>
    <li>Suspendisse vitae eleifend mauris, ut imperdiet dui.</li>
    <li>Aenean dictum venenatis porttitor.</li>
  </ul>
</div>
<div id="tab2" class="lada_adm">
  <span onclick="this.parentElement.style.display='none'" class="btn_inchid">&times;</span>
  <h2>Suspendisse posuere nisi id laoreet iaculis</h2>
  <ul>
    <li>Morbi vel nibh lectus.</li>
    <li>Nulla mauris metus, venenatis id nunc at, feugiat scelerisque justo.</li>
    <li>Nam cursus quam et mi semper finibus.</li>
    <li>Duis consectetur sapien orci, vitae ornare est sollicitudin ut.</li>
    <li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</li>
    <li>Morbi maximus velit felis, sit amet placerat ante faucibus posuere.</li>
  </ul>
</div>

<div id="tab3" class="lada_adm">
  <span onclick="this.parentElement.style.display='none'" class="btn_inchid">&times;</span>
  <h2>Nullam ornare ligula aliquam mi...

CSS

:root {
  --cul1: #e4d1d1; /*RGBA(30,150,80,0.2);*/
  --cul2: #b9b0b0; /*RGBA(30,150,80,0.4);*/
  --cul3: #d9ecd0; /*RGBA(30,150,80,0.6);*/
  --cul4: #77a8a8; /*RGBA(30,150,80,0.8);*/
  --culTxt:DarkBlue;
  --marTxt:22px;
}
.rind_adm {display: table;width: 100%;}
.rind_adm:after {content: ""; clear: both;}
.col_adm {
  position: relative;
  float: left;
  width: 25%;
  height:100px;
  padding: 0px;
  text-align: center;
  font-size: var(--marTxt);
  font-family: 'Arial Narrow', Tahoma, Arial, sans-serif;
  cursor: pointer;
  color: var(--culTxt);
  box-sizing: border-box;
  margin: 0;  
  border-radius:25px 25px 0 0 ;
}
.col_adm:nth-child(1)  { background:var(--cul1); border:2px solid var(--cul1); border-bottom:none;}
.col_adm:nth-child(2)  { background:var(--cul2); border:2px solid var(--cul2); border-bottom:none;}
.col_adm:nth-child(3)  { background:var(--cul3); border:2px solid var(--cul3); border-bottom:none;}
.col_adm:nth-child(4)  { background:var(--cul4); border:2px solid var(--cul4); border-bottom:none;}
.col_adm p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*---------------*/
  border: 0px solid red; 
}
.lada_adm {
  padding: 20px;
  color: var(--culTxt);
  margin: 0;
}
#tab1 {background-image: linear-gradient(var(--cul1), white);border-color: var(--cul1); }
#tab2 {background-image: linear-gradient(var(--cul2), white);border-color: var(--cul2); }
#tab3 {background-image: linear-gradient(var(--cul3), white);border-color: var(--cul3); }
#tab4 {background-image: linear-gradient(var(--cul4), white);border-color: var(--cul4); }      
#tab1, #tab2, #tab3, #tab4 {display:none; border-style: outset;border-width: 2px;border-style: solid;border-top:none;}
.btn_inchid {
  float: right;
  color: var(--culTxt);
  font-size: 36px;
  cursor: pointer;
  font-weight:bold;
}
@media screen and (max-width: 600px) {
  .col_adm {  
    float:left;
    width:100%; 
   ...

JavaScript

function deschid_tab(nume_tab) {
  var i, cls;
  cls = document.getElementsByClassName("lada_adm");
  for (i = 0; i < cls.length; i++) {
    cls[i].style.display = "none";
  }
  document.getElementById(nume_tab).style.display = "block";
}