JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<div class="heading_div">
          <div class="inner_heading show_hide">
          		<input type="checkbox" /><label>CSS ZILLA Toggle</label> <p class="stars"><span><a class="star-1" href="#">1</a><a class="star-2" href="#">2</a><a class="star-3" href="#">3</a><a class="star-4" href="#">4</a><a class="star-5" href="#">5</a></span></p></span>
          </div>
       
    	   
         <div class="slidingDiv">
                 <span class="button_block">                
                 	<a class="red status">Not Added</a>
                 	<a href="#" class="btn_blue lag_link">flag</a>                 
                 	<a href="#" class="btn_blue btn_link">Comment</a>
                  </span>
                 
                 <span class="social_shr">
                 	<a href="#">
                    	<span class="social_icon_facebook">F</span>
                    </a>
                    
                    <a href="#">
                    	<span class="social_icon">M</span>
                    </a>
                    
                    <a href="#">
                    	<span class="social_icon">G+</span>
                    </a>
                    
                    <a href="#">
                    	<span class="social_icon">T</span>
                    </a>
                 </span>
                 
                 
   		 </div>
    
</div>

CSS

body { font-family:Arial, Helvetica, sans-serif;}
a { text-decoration:none;}
.heading_div {background: none repeat scroll 0 0 #CCCCCC; float: left; min-height: auto; width:500px;}
.ratings { float:right; margin-top:15px;}
.inner_heading input { margin:0 0 0 0;}
.container { float:left; width:100%; margin-top:5px; display:none;}
.status {border-radius: 3px 3px 3px 3px; text-transform:uppercase;
    font-size: 13px;
    padding: 0px 9px;
    text-align: center;
	float:left;
	margin-right:10px;
	height:30px;
	line-height:30px; cursor:pointer;}
.red { background-color: #EA8082;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #B32D2D;}
.flag_icon {
    float: left;
    height: 12px;
    margin-top: 0;
    width: 13px;
}
.btn_blue {background-color: #578FD3;
    background-image: linear-gradient(to bottom, #578FD3, #205DB1);
    background-repeat: repeat-x;
    color: #FFFFFF !important;
    float: left;
    height: 30px;
	margin-right:10px; line-height:30px; border-radius:5px; font-size:13px; text-transform:uppercase;
    outline: 0 none;
    text-shadow: 1px 1px 1px #1E4B93;
    padding:0px 15px;}
.flag_link {border-radius: 5px 5px 5px 5px;
    display: inline-block;
    float: left;
    font-size: 13px;
    line-height: 17px;
    padding: 4px 9px;}
	
.btn_link { border-radius: 5px 5px 5px 5px;
    display: block;
    float: left;
    }
	
.button_block { float:left;}

.social_shr { float:right;}
	
.social_shr span { border-radius: 5px;
    float: left;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 32px; background:#fff;}
.social_shr a { color:#999; font-family:Arial, Helvetica, sans-serif;}	
	
	
.social_shr a { float:left;
    margin-left: 2px;
    margin-right: 5px;}

.inner_heading { background:#C90; height:55px; line-height:55px; color:#fff; padding:0 15px; cursor:pointer;}
.slidingDiv {  padding:20px 10px; float:left;}

p.stars { float:right; margin:20px 0 0 0;}

p.stars span { 
float: left;
width: 100px;
}
p.stars span a...

JavaScript

$(document).ready(function(){


    $(".slidingDiv").hide();
	$(".show_hide").show();
	
	$('.show_hide').click(function(){
	$(".slidingDiv").slideToggle();
	});

});