<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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">
<div class="input-group custom-search-form">
<input type="text" placeholder="Search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default advenced" type="button">
<span class="glyphicon glyphicon-filter"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div id="panelAdv" style='display:none'>
<input type="text" placeholder="Advenced input 1" class="form-control">
<input type="text" placeholder="Advenced input 2" class="form-control">
<input type="text" placeholder="Advenced input 3" class="form-control">
</div>
<br>
<hgroup class="mb20">
<h1>Search Results</h1>
<h2 class="lead"><strong class="text-danger">3</strong> results were found for the search for <strong class="text-danger">Lorem</strong></h2>
</hgroup>
<section class="col-xs-12 col-sm-6 col-md-12">
<article class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="#" title="Lorem ipsum" class="thumbnail"><img src="http://lorempixel.com/250/140/cats" alt="Lorem ipsum" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-user"></i> <span>bénévoles</span></li>
<li><i class="glyphicon glyphicon-euro"></i> <span>financement</span></li>
<li><i class="glyphicon glyphicon-shopping-cart"></i> <span>en nature</span></li>
<li><i class="glyphicon glyphicon-heart-empty"></i> <span>autres</span></li>
</ul>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
<span class="progress-type">Profile complette</span>
<span class="progress-completed">60%</span>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="#" title="">Voluptatem, exercitationem, suscipit, distinctio</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque.</p>
<span class="plus1 pull-right"><a href="#" title="Lorem ipsum"><i class="glyphicon glyphicon-plus"></i></a></span>
<br>
<div class='morePanel1' style='display:none'> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
</div>
<span class="clearfix borda"></span>
</article>
<article class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="#" title="Lorem ipsum" class="thumbnail"><img src="http://lorempixel.com/250/140/business" alt="Lorem ipsum" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-user"></i> <span>bénévoles</span></li>
<li><i class="glyphicon glyphicon-euro"></i> <span>financement</span></li>
<li><i class="glyphicon glyphicon-shopping-cart"></i> <span>en nature</span></li>
<li><i class="glyphicon glyphicon-heart-empty"></i> <span>autres</span></li>
</ul>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">20% Complete</span>
</div>
<span class="progress-type">Profile complette</span>
<span class="progress-completed">20%</span>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-7">
<h3><a href="#" title="">Voluptatem, exercitationem, suscipit, distinctio</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque.</p>
<span class="plus2 pull-right"><a href="#" title="Lorem ipsum"><i class="glyphicon glyphicon-plus"></i></a></span>
<br>
<div class='morePanel2' style='display:none'> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div> </div>
<span class="clearfix borda"></span>
</article>
<article class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="#" title="Lorem ipsum" class="thumbnail"><img src="http://lorempixel.com/250/140/city" alt="Lorem ipsum" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-user"></i> <span>bénévoles</span></li>
<li><i class="glyphicon glyphicon-euro"></i> <span>financement</span></li>
<li><i class="glyphicon glyphicon-shopping-cart"></i> <span>en nature</span></li>
<li><i class="glyphicon glyphicon-heart-empty"></i> <span>autres</span></li>
</ul>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 15%;">
<span class="sr-only">15% Complete</span>
</div>
<span class="progress-type">Profile complette</span>
<span class="progress-completed">15%</span>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-7">
<h3><a href="#" title="">Voluptatem, exercitationem, suscipit, distinctio</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque.</p>
<span class="plus3 pull-right"><a href="#" title="Lorem ipsum"><i class="glyphicon glyphicon-plus"></i></a></span>
<br>
<div class='morePanel3' style='display:none'> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div> </div>
<span class="clearfix border"></span>
</article>
<div class="text-center">
<ul class="pagination ">
<li class='disabled'><a href="#">«</a></li>
<li class='active'><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</section>
</div>
@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
.container { margin-top: 20px; }
.mb20 { margin-bottom: 20px; }
hgroup { padding-left: 15px; border-bottom: 1px solid #ccc; }
hgroup h1 { font: 500 normal 1.625em "Roboto",Arial,Verdana,sans-serif; color: #2a3644; margin-top: 0; line-height: 1.15; }
hgroup h2.lead { font: normal normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #2a3644; margin: 0; padding-bottom: 10px; }
.active .glyphicon{color:white;}
.search-result .thumbnail { border-radius: 0 !important; }
.search-result:first-child { margin-top: 0 !important; }
.search-result { margin-top: 20px; }
.search-result .col-md-2 { border-right: 1px dotted #ccc; min-height: 140px; }
.search-result ul { padding-left: 0 !important; list-style: none; }
.search-result ul li { font: 400 normal .85em "Roboto",Arial,Verdana,sans-serif; line-height: 30px; }
.search-result ul li i { padding-right: 5px; }
.search-result .col-md-7 { position: relative; }
.search-result h3 { font: 500 normal 1.375em "Roboto",Arial,Verdana,sans-serif; margin-top: 0 !important; margin-bottom: 10px !important; }
.search-result h3 > a, .search-result i { color: #248dc1 !important; }
.search-result p { font: normal normal 1.125em "Roboto",Arial,Verdana,sans-serif; }
.search-result span.plus { position: absolute; right: 0; top: 126px; }
.search-result span.plus a { background-color: #248dc1; padding: 5px 5px 3px 5px; }
.search-result span.plus a:hover { background-color: #414141; }
.search-result span.plus a i { color: #fff !important; }
.search-result span.border { display: block; width: 97%; margin: 0 15px; border-bottom: 1px dotted #ccc; }
.progress {
position: relative;
height: 25px;
}
.progress > .progress-type {
position: absolute;
left: 0px;
font-weight: 800;
padding: 3px 30px 2px 10px;
color: rgb(255, 255, 255);
background-color: rgba(25, 25, 25, 0.4);
}
.progress > .progress-completed {
position: absolute;
right: 0px;
font-weight: 800;
padding: 3px 10px 2px;
}
$('.advenced').click(function(e){
e.preventDefault();
$('#panelAdv').toggle();
});
$('.plus1 a').click(function(e){
e.preventDefault();
if($(this).children('i').hasClass('glyphicon-plus')){
$(this).children('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
}
else{
$(this).children('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
}
$('.morePanel1').toggle();
});
$('.plus2 a').click(function(e){
e.preventDefault();
if($(this).children('i').hasClass('glyphicon-plus')){
$(this).children('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
}
else{
$(this).children('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
}
$('.morePanel2').toggle();
});
$('.plus3 a').click(function(e){
e.preventDefault();
if($(this).children('i').hasClass('glyphicon-plus')){
$(this).children('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
}
else{
$(this).children('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
}
$('.morePanel3').toggle();
});
