https://codepen.io/tanaproma/details/MNYYvo

https://codepen.io/tanaproma/details/oNgXxvK

https://codepen.io/AdoreJaeger/pen/NWKBjmo

<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'>Button 1</span>
    <span class='content2'>Button 2</span>
    <span class='content3'>Button 3</span>
    <div id='lamp' class='content1'></div>
  </div>
  <div class='tab-content'>
   
    <div class='content1'>This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.</div>
   
    <div class='content2'>This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.</div>
   
    <div class='content3'>This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.</div>
   
  </div>
</div>

<script>
$('.tab-content>div').hide();
$('.tab-content>div').first().slideDown();
  $('.tab-buttons span').click(function(){
    var thisclass=$(this).attr('class');
    $('#lamp').removeClass().addClass('#lamp').addClass(thisclass);
    $('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(800);
      }
      else{
        $(this).hide();
      }
    });
  });
</script>

#pun .post-author a {color: #764c8c;
box-shadow: inset 0 -5px 0 #9ccda5;
transition: 0.8s;}

#pun .post-author a:hover {color: #555;
box-shadow: inset 0 -30px 0 #4f194f;
transition: 0.8s;}