hontabs v2

<style>
body {
	background: #051021;
	color: #FFF;
}

.hontabmenu {
	width: 760px;
    min-height: 400px;
    margin: 20px;
    padding: 10px;
    /* background: #444; */
    border: 1px solid #444;
    margin-bottom: 15px;
    -moz-border-radius: 10px;
	background: #051021;
	color: #FFF;
	font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.tabcontent {
	display: none;
	margin-top: 2px;
    background: #232a3b;
    border: 1px solid #333;
    padding: 5px;
    -moz-border-radius: 10px;
    text-align: center;
}

.tab {
	text-align: center;
}

.tab button {
	display: inline;
    list-style: none;
    padding-right: 5px;
	background-color: transparent;
	color: #FFF;
	border: 0;
	padding: 6px;
	margin-top: 0;
    margin-bottom: 0;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
	font-family: verdana;
	font-size: 8pt;
}

.tab button:hover {
	background-color: #707070;
	padding: 6px;
	color: #FFFFFF;
	border: 0;
}

.tab button.active {
	background-color: #707070;
	padding: 6px;
	color: #FFFFFF;
	border: 0;
}
</style>

<div class="hontabmenu">
<div class="tab">
  <button class="tablinks" onclick="openhonTab(event, 'Tab1')">Tab1</button>
  <button class="tablinks" onclick="openhonTab(event, 'Tab2')">Tab2</button>
</div>

<!-- Tab content -->
<div id="Tab1" class="tabcontent">
  <h2>Tab1</h2>
  <p>The tab 1 content.</p>
</div>

<div id="Tab2" class="tabcontent">
  <h2>Tab2</h2>
  <p>The tab 2 content.</p>
</div>

</div>

<script>function openhonTab(evt, tabName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementsByClassName = function(cl) {
  var retnode = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
  }
  return retnode;
};
</script>

<style>
/* FADE EFFECT */
.tabcontent {
  animation: fadeEffect 1s;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>