JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<div class="postWrapper">
    POST
    <div class="post">
      <div class="postTitleBar">title</div>
      <div class="cCLeft">
        <h2 class="post">
          Title of Post
        </h2>
      </div>
      <div class="cCMiddle"> added
        January 1st, 1970
        |
        1 Comment
      </div>

      <div class="cCRight">
        <a class="moreless" href="#"> More / Less</a>
      </div>
      <div class="expand">
        Content goes here
      </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000000;
    background: #FFFFFF;
    line-height:1.5;
    text-align:center;
}
h1 {
    background-color:#FFFFFF;
    font-size:48px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:75%;
    padding:0px 10px 0px 0px;
    float:left;
    background-color:#FFFFFF;
}
h2 {
    /*height: 71px;*/
    font-size:42px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:85%;
    color:#000000;
    margin:0px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
}
h3 {
    font-size:24px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-2px;
    padding:20px 0px 10px 0px;
}
h1 a:link {
    text-decoration:none;
    color:#000000;
}
h1 a:visited {
    text-decoration:none;
    color:#000000;
}
h1 a:hover {
    text-decoration:none;
    color:#000000;
}
#wrapper {
    width:960px;
    height:100%;
    margin: 0 auto;
    text-align:left;
}
#barCode {
    width: 960px;
    height: 10px;
    text-align:right;
    margin:1px 0px 0px 0px;
    padding:14px 0px 0px 0px;
}
#tagLine {
    font-size:12px;
    text-indent:5px;
    letter-spacing:10px;
    clear:both;
}
#menuWrapper {
    background-color:#000000;
    width: 940px;
    height:35px;
    padding:0px 20px 0px 0px;
}
.menu {
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:right;
    letter-spacing:0px;
    line-height:90%;
    color:#FFFFFF;
    margin:4px 0px 0px 0px;
    float:right;
}
.menu ul {
    list-style:none;
}
.menu ul li {
    display: block;
}
.menu a:link {
    text-decoration:none;
    color:#FFFFFF;
}
.menu a:visited {
    text-decoration:none;
    color:#FFFFFF;
}
.menu a:hover {
    text-decoration:none;
    color:#FFFFFF;
}
.menuSpacer {
    width:1px;
    height:25px;
    margin:5px 20px 0px 20px;
   ...

JavaScript

$(document).ready(function() {

 // hides the slickbox as soon as the DOM is ready
  $('.expand').hide();
 // toggles the slickbox on clicking the noted link  
  $('a.moreless').click(function() {
    $(this).closest('.post').find('.expand').toggle(400);
    return false;
  });
});