JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul id="sidemenu">
  <li>
    <a href="#home-content" class="open"><i class="icon-home icon-large"></i><strong>Home</strong></a>
  </li>

  <li>
    <a href="#about-content"><i class="icon-info-sign icon-large"></i><strong>About</strong></a>
  </li>
  
  <li>
    <a href="#ideas-content"><i class="icon-lightbulb icon-large"></i><strong>Ideas</strong></a>
  </li>
  
  <li>
    <a href="#contact-content"><i class="icon-envelope icon-large"></i><strong>Contact</strong></a>
  </li>
</ul>

<div id="content">
    
<div id="home-content" class="contentblock">
    
</div>
        
<div id="about-content" class="contentblock hidden">
</div>
    
<div id="ideas-content" class="contentblock hidden">
    
</div>
    
<div id="contact-content" class="contentblock hidden">
</div>
</div>

CSS

/* side navigation */
#sidemenu {
  margin: 0;
  padding: 0;
  width: 80px;
  float: left;
  background: #e8e8e8;
  border-right: 1px solid #c9c9c9;
}


#sidemenu li { display: block; text-align: center; border-top: 1px solid #fff; font-size: 1.1em; }

#sidemenu li a { 
  display: block;
  padding: 6px 2px;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #d1d1d1;

}
#sidemenu li a:hover {
  background: #f2f2f2;
}

#sidemenu li a strong { 
  display: block;
  margin-top: 5px;
}

#sidemenu li a.open {
  width: 101%;
  background: #fff;
}


/* main page */
#w {
  display: block;
  width: 900px;
  margin: 0 auto;
  background: none;
}


#content {
  display: block;
  background: #fff;
  padding: 0px 15px;
  margin-left: 80px;
  -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  min-height: 300px;
}


.contentblock {
  display: block;
  padding: 15px 20px;
}

.contentblock.hidden {
  display: none;
}

JavaScript

$(function(){
  $('#sidemenu a').on('click', function(e){
    e.preventDefault();

    if($(this).hasClass('open')) {
      // do nothing because the link is already open
    } else {
      var oldcontent = $('#sidemenu a.open').attr('href');
      var newcontent = $(this).attr('href');
      
      $(oldcontent).fadeOut('fast', function(){
        $(newcontent).fadeIn().removeClass('hidden');
        $(oldcontent).addClass('hidden');
      });
      
     
      $('#sidemenu a').removeClass('open');
      $(this).addClass('open');
    }
  });
});