JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>
<script type="text/javascript">

</script>
</head>

<body>
<div class="clearfix" id="infoContainer">
      <div class="tabhead clearfix">
          <div class="drops">       
              <a class="button lessInfo" href="#">Less Info</a>
          </div> 
      </div>  
             
    </div>
<div class="tabhead clearfix">
      <div class="clearfix drops">
          <a class="button moreInfo" href="#">More Info</a>
      </div>
    </div>
</body>
</html>

CSS

#infoContainer {display:none;}
 
 
 .drops {float:right; margin:12px 10px 0 0;}
   .dropset {float:left; padding:4px 0 4px 0; color:#666;}
   .drops .dropdown, .drops .button {position:relative; float:left; margin-left:6px;}
   .drops .dropdown:hover, .drops .button:hover {background:#fff; cursor:pointer; cursor:hand;}
       .drops  .dropLabel, .drops .dropLinks, .drops .button {border:1px solid #ccc;  background:#fff; -moz-border-radius: 5px; border-radius:5px;}
     .drops .dropLinks {background:#fff;}
     .drops .dropLabel, .drops .dropLinks a {min-width:80px;}
     .drops .dropLabel, .drops .button {height:18px; padding:3px 8px; white-space:nowrap;}
     .ie .drops .lessInfo {margin-right:0;}
     .drops .dropLinks {position:absolute; z-index:9999; top:25px; left:0; white-space:nowrap; display:none;}
         .drops a  {display:block; padding:3px 8px; }
       .drops a.remove {font-family:Arial, Helvetica, sans-serif;}
       .drops a.button {color:#333;}
       .drops  a:hover, .drops .dropdown:hover .dropLabel, .drops a.button:hover  {background-color:#E6F1FF; text-decoration:none; color:#333;}
         .drops a.infoToggle {width:58px; text-align:center;}
         .drops a.twittericon, .drops a.wikipediaicon {margin:5px 3px 0 3px; padding:0;}
         .drops a.twittericon:hover, .drops a.wikipediaicon:hover {background-color:#fff;}
       .drops a.remove:hover {background:#FFE9E6; color:#933; border-color:#FFCAC2}
       .drops a.searchq:hover {background:#EDFFEF; color:#248A2C; border-color:#83DE8A}
       .drops a.active {display:none;}
        /* .drops a.active {display:none;} */
   
 
 #infoContainer {border-bottom:1px solid #EAEAEA; padding-bottom:20px; display:none;}
 #itemInfo .image, #itemInfo .info {margin-top:20px;}
 
 /* Modern clearfix, as per html5 boilerplate */
 .clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden; 
 }
 .clearfix:after { clear: both; }
 .clearfix { zoom: 1; }

JavaScript

$(document).ready(function(){
     $(".moreInfo").click(function(){
         $("#infoContainer").slideDown();
         $(this).hide();
     });
     $(".lessInfo").click(function(){
         $("#infoContainer").slideUp();
         $(".moreInfo").show();
     });
 });