<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top: 30px;">
<div class="row form-group">
<div class="col-xs-12 col-md-offset-2 col-lg-offset-2 col-md-8 col-lg-8">
<div class="panel panel-default">
<div class="panel-heading">
<i>Mashable</i> - <span>#Social-Media</span><span>#Web</span>
</div>
<div class="panel-image">
<img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d09387ae003_1.JPG" class="panel-image-preview" />
<!--<label for="toggle-1"></label>-->
<h4>Summary</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p>
</div>
<!--<input type="checkbox" id="toggle-1" class="panel-image-toggle">-->
<div class="panel-body hide" style="padding: 0;">
<p>this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph,</p>
<p>this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph,</p>
<p>this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph,</p>
</div>
<div class="panel-footer clearfix">
<a href="#download" class="btn btn-primary btn-sm btn-hover pull-left">Save <span class="fa fa-bookmark"></span></a>
<a href="#facebook" class="btn btn-success btn-sm btn-hover pull-left" style="margin-left: 5px;">Shr <span class="glyphicon glyphicon-send"></span></a>
<a class="btn comsys btn-danger btn-sm btn-hover pull-left" style="margin-left: 5px;">Cmt <span class="fa fa-comment"></span></a>
<a href="#share" class="btn btn-warning btn-sm btn-hover pull-left" style="margin-left: 5px;">Like <span class="fa fa-thumbs-up"></span></a>
<span class="toggler fa fa-chevron-down pull-right"></span>
</div>
</div>
<div class="panel cmts panel-primary" style="display: none;">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Comments
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu slidedown">
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">
</span>Refresh</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">
</span>Available</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">
</span>Busy</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>
Away</a></li>
<li class="divider"></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>
Sign Out</a></li>
</ul>
</div>
</div>
<div class="panel-body body-panel">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>14 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer clearfix">
<textarea class="form-control" rows="3"></textarea>
<span class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12" style="margin-top: 10px">
<button class="btn btn-warning btn-lg btn-block" id="btn-chat">Send</button>
</span>
</div>
</div>
<hr>
<div class="panel panel-default">
<!--<div class="panel-heading">
<h3 class="panel-title">You can even have a Panel Title</h3>
</div>-->
<div class="panel-image">
<img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52cf9489095e8_1.JPG" class="panel-image-preview" />
<label for="toggle-2"></label>
<h4>Summary</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p>
</div>
<!--<input type="checkbox" id="toggle-2" class="panel-image-toggle">-->
<div class="panel-body hide" style="padding: 0;">
<p>this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph,</p>
<p>this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph,</p>
<p>this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph, this is another paragraph,</p>
</div>
<div class="panel-footer clearfix">
<a href="#download" class="btn btn-primary btn-sm btn-hover pull-left">Save <span class="fa fa-bookmark"></span></a>
<a href="#facebook" class="btn btn-success btn-sm btn-hover pull-left" style="margin-left: 5px;">Shr <span class="glyphicon glyphicon-send"></span></a>
<a class="btn comsys btn-danger btn-sm btn-hover pull-left" style="margin-left: 5px;">Cmt <span class="fa fa-comment"></span></a>
<a href="#share" class="btn btn-warning btn-sm btn-hover pull-left" style="margin-left: 5px;">Like <span class="fa fa-thumbs-up"></span></a>
<span class="toggler fa fa-chevron-down pull-right"></span></a>
</div>
</div>
<div class="panel cmts panel-primary" style="display: none;">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Comments
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu slidedown">
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">
</span>Refresh</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">
</span>Available</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">
</span>Busy</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>
Away</a></li>
<li class="divider"></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>
Sign Out</a></li>
</ul>
</div>
</div>
<div class="panel-body body-panel">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>14 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer clearfix">
<textarea class="form-control" rows="3"></textarea>
<span class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12" style="margin-top: 10px">
<button class="btn btn-warning btn-lg btn-block" id="btn-chat">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.panel-image {
position: relative;
}
.panel-image > h4, p {
padding: 5px 10px 0px;
}
.panel-image img.panel-image-preview {
width: 100%;
border-radius: 4px 4px 0px 0px;
}
.panel-image label {
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.panel-heading > span {
background: #ccc;
padding: 4px;
margin-right: 10px;
}
.panel-heading ~ .panel-image img.panel-image-preview {
border-radius: 0px;
}
.panel-body {
/*overflow: hidden;*/
}
.panel-footer span {
cursor: pointer;
}
.panel-image ~ input[type=checkbox] {
position:absolute;
top:- 30px;
z-index: -1;
}
.panel-image ~ input[type=checkbox] ~ .panel-body {
height: 0px;
padding: 0px;
}
.panel-image ~ input[type=checkbox]:checked ~ .panel-body {
height: auto;
padding: 15px;
}
.panel-image ~ .panel-footer a {
padding: 0px 5px;
font-size: 14px;
/*color: rgb(100, 100, 100);*/
}
.btn-hover {
font-weight: normal;
color: #333333;
cursor: pointer;
background-color: inherit;
border-color: transparent;
}
.btn-hover-alt {
font-weight: normal;
color: #ffffff;
cursor: pointer;
background-color: inherit;
border-color: transparent;
}
/**** comment system ****/
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.body-panel
{
overflow-y: scroll;
height: 300px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
$('.toggler').click(function() {
var tog = $(this);
var secondDiv = tog.parent().prev();
var firstDiv = secondDiv.prev();
firstDiv.children('p').toggleClass('hide');
secondDiv.toggleClass('hide');
//tog.parent().find('.first > p').toggleClass('hide');
//tog.parent().find('.second').toggleClass('hide');
//$('.first > .main').toggleClass('hide');
tog.toggleClass('fa fa-chevron-up fa fa-chevron-down');
return false;
});
$('.comsys').click(function() {
var togCmt = $(this);
togCmt.toggleClass('active');
var panelFooterDiv = togCmt.parent();
var panelDefaultDiv = panelFooterDiv.parent();
var panelCmtsDiv = panelDefaultDiv.next();
panelCmtsDiv.slideToggle('hide');
return false;
});
