<div class="col-container">
  <div class="column" onclick="tabExtend('aboutUs')" style="background-color:#2a9d8f;">
    About
  </div>
  <div class="column" onclick="tabExtend('services')" style="background-color:#e9c46a;">
    Services
  </div>
  <div class="column" onclick="tabExtend('contact')" style="background-color:#e76f51;">
    Contact
  </div>
</div>

<div id="aboutUs" class="expandedTab">
  <span onclick="this.parentElement.style.display='none'" class="close">&times;</span>
  <h2>About Us:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>

<div id="services" class="expandedTab">
  <span onclick="this.parentElement.style.display='none'" class="close">&times;</span>
  <h2>Services:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>

<div id="contact" class="expandedTab">
  <span onclick="this.parentElement.style.display='none'" class="close">&times;</span>
  <h2>Contact:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.column {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  float: left;
  width: 33.33%;
  padding: 70px;
  font-size: 30px;
  cursor: pointer;
  color: white;
}

.expandedTab {
  padding: 70px;
  color: white;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}

.close {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

#aboutUs, #services, #conact {
  display: none;
}

#aboutUs {
  background-color:#2a9d8f;
}

#services {
  background-color:#e9c46a;
}

#contact {
  background-color:#e76f51;
}

p {
  font-size: 20px;
}

function tabExtend(name) {
  var i, x;
  x = document.getElementsByClassName("expandedTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(name).style.display = "block";
}