"feed"
Bootstrap 3.0.3 Snippet by 1eddy87

<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; });

Related: See More


Questions / Comments: