<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 ---------->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<div class="container">
<div class="page-header">
<h1>NEEDS</h1>
<h2>Some catchy subtitle</h2>
</div>
<div class="row">
<div class="col-md-3">
<div class="filters">
<h3>REFINE SEARCH</h3>
<div class="form-group">
<label>Need type</label>
<select class="input-large form-control">
<option value=""selected="selected">Select type</option>
<option value="AL" >Volunteer</option>
<option value="AK">Financial</option>
<option value="AK">In-Kind</option>
<option value="AK">Other</option>
</select>
</div>
<div class="form-group">
<label>Activity</label>
<select class="input-large form-control">
<option value=""selected="selected">Select activity</option>
</select>
</div>
<div class="form-group">
<label>Localisation</label>
<select class="input-large form-control">
<option value="">Select Localisation</option>
</select>
</div>
<div class="form-group">
<div class="pull-right">
<a href="#">Clear all filters</a>
<button type="button" class="btn btn-default">filter</button>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<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" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div id="large" class="bootstrap-tags bootstrap-3">
<div class="needs-filter">
<div class="form-group">
<div class="row">
<span class="col-xs-12 col-sm-6 col-md-6"></span>
<span class="col-xs-12 col-sm-6 col-md-2 ">
<label > Sort by </label>
</span>
<span class="col-xs-12 col-sm-6 col-md-4">
<select class="input-large form-control">
<option value="">Posted Date</option>
<option value="AL" selected="selected">Posted Date</option>
<option value="AK">Name</option>
</select>
</div>
</span>
</div>
</div>
<div class="tags">
<div class="tag label btn-info md">
<span>Need type: Volunteer </span>
<a style="opacity: 0.6;">
<i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i>
</a></div>
<div class="tag label btn-info md">
<span>Need type: In-Kind</span>
<a style="opacity: 0.6;"></a>
<i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i>
</div>
</div>
</div>
<section class="col-xs-12 col-sm-6 col-md-12">
<article class="needs-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/100/100/business" alt="Lorem ipsum" />
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-9">
<div class="row">
<div class="pull-right">
<span class="needSubType">Animation & training</span>
<span class="needType" > <i class="fa fa-user fa-2x"></i></span>
</div>
</div>
<div class="pull-right expireDate">
<span>Added:</span>
<span>27.07.2014</span>
<span>Expire:</span>
<span>30.11.2014</span></div>
</div>
<div class="row needs">
<h3>
<a href="#" title="">SOCIALWARE</a>
</h3>
<h4>Education</h4>
<h3>
<a href="http://vm-ts-guidestar:8240/Org-InBrief.aspx?CCReg=0409103735" title="">Centre Belge d'Education
Therapeutique pour Infirmes Moteurs Cerebraux</a>
</h3>
</div>
<div class="morePanel" style="display: none;">
<p>Le Centre du C.B.I.M.C. assure la rééducation fonctionnelle multidisciplinaire des enfants à raison de trois
thérapies différentes par jour. L'équipe thérapeutique est composée * d'une équipe médicale : médecins
spécialistes en réadaptation fonctionelle (neuropédiatrie, médecine physique, neuropsychiatrie) ; * d'une équipe
pluridisciplinaire : ergothérapeutes, kinésithérapeutes, logopèdes, neuropsychologue, psychologue, éducateurs et
puéricultrices ; * d'un service social ; * d'un service administratif. Le Centre dispose également d'un
service d'orientation spécialisé agréé qui assure des bilans d'aptitudes avec une attention particulière à la
préparation préprofessionnelle, à l'apprentissage et à la mise en situation réelle. Le Centre travaille en
étroite collaboration avec l'école du C.B.I.M.C. spécialisée de Type 4 appartenant au réseau Libre.</p>
</div>
<span class="moreButton pull-right">
<a href="#" title="Montrer plus">
<i class="glyphicon glyphicon-plus"></i>
</a>
</span>
<br />
</article>
<article class="needs-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/100/100/people" alt="Lorem ipsum" />
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-9">
<div class="row">
<div class="pull-right">
<span class="needSubType">Administration</span>
<span class="needType" > <i class="fa fa-user fa-2x"></i></span>
</div>
</div>
<div class="pull-right expireDate">
<span>Added:</span>
<span>31.07.2014</span>
<span>Expire:</span>
<span>31.08.2014</span></div>
</div>
<div class="row needs">
<h3>
<a href="#" title="">PASSAGES ASBL</a>
</h3>
<h4>Culture</h4>
<h3>
<a href="http://vm-ts-guidestar:8240/Org-InBrief.aspx?CCReg=0409103735" title="">Nam libero tempore!</a>
</h3>
</div>
<div class="morePanel" style="display: none;">
<p>Le Centre du C.B.I.M.C. assure la rééducation fonctionnelle multidisciplinaire des enfants à raison de trois
thérapies différentes par jour. L'équipe thérapeutique est composée * d'une équipe médicale : médecins
spécialistes en réadaptation fonctionelle (neuropédiatrie, médecine physique, neuropsychiatrie) ; * d'une équipe
pluridisciplinaire : ergothérapeutes, kinésithérapeutes, logopèdes, neuropsychologue, psychologue, éducateurs et
puéricultrices ; * d'un service social ; * d'un service administratif. Le Centre dispose également d'un
service d'orientation spécialisé agréé qui assure des bilans d'aptitudes avec une attention particulière à la
préparation préprofessionnelle, à l'apprentissage et à la mise en situation réelle. Le Centre travaille en
étroite collaboration avec l'école du C.B.I.M.C. spécialisée de Type 4 appartenant au réseau Libre.</p>
</div>
<span class="moreButton pull-right">
<a href="#" title="Montrer plus">
<i class="glyphicon glyphicon-plus"></i>
</a>
</span>
<br />
</article>
<article class="needs-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/100/100/technics" alt="Lorem ipsum" />
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-9">
<div class="row">
<div class="pull-right">
<span class="needSubType" >Health care</span>
<span class="needType" > <i class="fa fa-medkit fa-2x"></i></span>
</div>
</div>
<div class="pull-right expireDate">
<span>Added:</span>
<span>01.08.2014</span>
<span>Expire:</span>
<span>15.11.2014</span></div>
</div>
<div class="row needs">
<h3>
<a href="#" title="">SOCIALWARE</a>
</h3>
<h4>Education</h4>
<h3>
<a href="http://vm-ts-guidestar:8240/Org-InBrief.aspx?CCReg=0409103735" title="">Et harum quidem rerum facilis</a>
</h3>
</div>
<div class="morePanel" style="display: none;">
<p>Le Centre du C.B.I.M.C. assure la rééducation fonctionnelle multidisciplinaire des enfants à raison de trois
thérapies différentes par jour. L'équipe thérapeutique est composée * d'une équipe médicale : médecins
spécialistes en réadaptation fonctionelle (neuropédiatrie, médecine physique, neuropsychiatrie) ; * d'une équipe
pluridisciplinaire : ergothérapeutes, kinésithérapeutes, logopèdes, neuropsychologue, psychologue, éducateurs et
puéricultrices ; * d'un service social ; * d'un service administratif. Le Centre dispose également d'un
service d'orientation spécialisé agréé qui assure des bilans d'aptitudes avec une attention particulière à la
préparation préprofessionnelle, à l'apprentissage et à la mise en situation réelle. Le Centre travaille en
étroite collaboration avec l'école du C.B.I.M.C. spécialisée de Type 4 appartenant au réseau Libre.</p>
</div>
<span class="moreButton pull-right">
<a href="#" title="Montrer plus">
<i class="glyphicon glyphicon-plus"></i>
</a>
</span>
<br />
</article>
<article class="needs-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/100/100/nightlife" alt="Lorem ipsum" />
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-9">
<div class="row">
<div class="pull-right">
<span class="needSubType">Furniture</span>
<span class="needType" > <i class="fa fa-medkit fa-2x"></i></span>
</div>
</div>
<div class="pull-right expireDate">
<span>Added:</span>
<span>10.08.2014</span>
<span>Expire:</span>
<span>01.12.2014</span></div>
</div>
<div class="row needs">
<h3>
<a href="#" title="">Aardewerk</a>
</h3>
<h4>Children</h4>
<h3>
<a href="http://vm-ts-guidestar:8240/Org-InBrief.aspx?CCReg=0409103735" title="">Totam rem aperiam</a>
</h3>
</div>
<div class="morePanel" style="display: none;">
<p>Le Centre du C.B.I.M.C. assure la rééducation fonctionnelle multidisciplinaire des enfants à raison de trois
thérapies différentes par jour. L'équipe thérapeutique est composée * d'une équipe médicale : médecins
spécialistes en réadaptation fonctionelle (neuropédiatrie, médecine physique, neuropsychiatrie) ; * d'une équipe
pluridisciplinaire : ergothérapeutes, kinésithérapeutes, logopèdes, neuropsychologue, psychologue, éducateurs et
puéricultrices ; * d'un service social ; * d'un service administratif. Le Centre dispose également d'un
service d'orientation spécialisé agréé qui assure des bilans d'aptitudes avec une attention particulière à la
préparation préprofessionnelle, à l'apprentissage et à la mise en situation réelle. Le Centre travaille en
étroite collaboration avec l'école du C.B.I.M.C. spécialisée de Type 4 appartenant au réseau Libre.</p>
</div>
<span class="moreButton pull-right">
<a href="#" title="Montrer plus">
<i class="glyphicon glyphicon-plus"></i>
</a>
</span>
<br />
</article>
<article class="needs-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/100/100/sports" alt="Lorem ipsum" />
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-9">
<div class="row">
<div class="pull-right">
<span class="needSubType">Animation & training</span>
<span class="needType" > <i class="fa fa-user fa-2x"></i></span>
</div>
</div>
<div class="pull-right expireDate">
<span>Added:</span>
<span>10.08.2014</span>
<span>Expire:</span>
<span>30.09.2014</span></div>
</div>
<div class="row needs">
<h3>
<a href="#" title="">BeatChronic ASBL</a>
</h3>
<h4>Women</h4>
<h3>
<a href="http://vm-ts-guidestar:8240/Org-InBrief.aspx?CCReg=0409103735" title="">Nemo enim ipsam voluptatem quia voluptas</a>
</h3>
</div>
<div class="morePanel" style="display: none;">
<p>Le Centre du C.B.I.M.C. assure la rééducation fonctionnelle multidisciplinaire des enfants à raison de trois
thérapies différentes par jour. L'équipe thérapeutique est composée * d'une équipe médicale : médecins
spécialistes en réadaptation fonctionelle (neuropédiatrie, médecine physique, neuropsychiatrie) ; * d'une équipe
pluridisciplinaire : ergothérapeutes, kinésithérapeutes, logopèdes, neuropsychologue, psychologue, éducateurs et
puéricultrices ; * d'un service social ; * d'un service administratif. Le Centre dispose également d'un
service d'orientation spécialisé agréé qui assure des bilans d'aptitudes avec une attention particulière à la
préparation préprofessionnelle, à l'apprentissage et à la mise en situation réelle. Le Centre travaille en
étroite collaboration avec l'école du C.B.I.M.C. spécialisée de Type 4 appartenant au réseau Libre.</p>
</div>
<span class="moreButton pull-right">
<a href="#" title="Montrer plus">
<i class="glyphicon glyphicon-plus"></i>
</a>
</span>
<br />
</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>
</div>
@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
body {background-color: #F6F6F6;}
.needs-result {background-color: #ffffff; padding:5px;}
.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;}
input, select , button{border-radius:0 !important;}
.page-header{background-color: #ffffff; padding:5px; color:#4f950f !important;}
.filters{background-color: #ffffff; padding:5px; padding-bottom:40px}
.needs-filter{background-color: #012d56; color:white;text-align: end;}
.needs-filter .row{margin-top: 5px;margin-bottom: 5px; padding:5px;}
.needs-filter span label {vertical-align: sub;}
.needs-result .thumbnail { border-radius: 0 !important; }
.needs-result:first-child { margin-top: 0 !important; }
.needs-result { margin-top: 20px; }
.needs-result .col-md-2 { border-right: 1px dotted #ccc; min-height: 140px; }
.needs-result ul { padding-left: 0 !important; list-style: none; }
.needs-result ul li { font: 400 normal .85em "Roboto",Arial,Verdana,sans-serif; line-height: 30px; }
.needs-result ul li i { padding-right: 5px; }
.needs-result .col-md-7 { position: relative; }
.needs-result h3 { font: 500 normal 17px "Roboto",Arial,Verdana,sans-serif; margin-top: 0 !important; margin-bottom: 10px !important; }
.needs-result h3 > a, .search-result i { color: #248dc1}
.needs-result p { font: normal normal 1.125em "Roboto",Arial,Verdana,sans-serif; }
.needs-result span.plus { position: absolute; right: 0; top: 126px; }
.needs-result span.plus a { background-color: #248dc1; padding: 5px 5px 3px 5px; }
.needs-result span.plus a:hover { background-color: #414141; }
.needs-result span.plus a i { color: #fff !important; }
.needs-result span.border { display: block; width: 97%; margin: 0 15px; border-bottom: 1px dotted #ccc; }
.needSubType{font-size: 16px; margin-right:5px;}
.needType i{color:#4f950f;}
.expireDate span{margin: 5px;font-size:12px }
.needs-result h3, .needs-result h4{margin-top:0, margin-bottom:5px }
a{color:#4f950f !important;}
.needs-result h3{font-size:14px; margin:5px !important; font-weight:bold}
.needs-result h4{font-size:12px; margin:5px !important; font-weight:bold}
.tags .label{
background-color: #646464;
}
.thumbnail {
border: none;
}
/* bootstrap-tags styles */
.bootstrap-tags.bootstrap-3 .tag a {
margin: 0 0 0 .3em; }
.bootstrap-tags.bootstrap-3 .glyphicon-white {
color: #fff; }
.bootstrap-tags.bootstrap-2 .tag.md {
padding: .3em .4em .4em; }
.bootstrap-tags.bootstrap-2 .tag.lg {
padding: .4em .4em .5em; }
.
.bootstrap-tags {
position: relative; }
.bootstrap-tags .tags {
width: inherit;
height: 0;
position: relative;
padding: 0;
margin: 10px; }
.bootstrap-tags .tag-data {
display: none; }
.bootstrap-tags .tags-input {
width: 100%;
margin: 0;
padding: 0;
height: 1.7em;
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; }
.bootstrap-tags .tag-list {
width: 280px;
height: auto;
min-height: 26px;
left: 2px;
top: 2px;
position: relative; }
.bootstrap-tags .tag {
padding: .4em .4em .4em;
margin: 0 .1em;
float: left; }
.bootstrap-tags .tag.sm {
padding: .4em .4em .5em;
font-size: 12px; }
.bootstrap-tags .tag.md {
font-size: 14px; }
.bootstrap-tags .tag.lg {
font-size: 18px;
padding: .4em .4em .4em;
margin: 0 .2em .2em 0; }
.bootstrap-tags .tag a {
color: #bbb;
cursor: pointer;
opacity: .5; }
.bootstrap-tags .tag .remove {
vertical-align: bottom;
top: 0; }
.bootstrap-tags ul.tags-suggestion-list {
width: 300px;
height: auto;
list-style: none;
margin: 0;
z-index: 2;
max-height: 160px;
overflow: scroll; }
.bootstrap-tags ul.tags-suggestion-list li.tags-suggestion {
padding: 3px 20px;
height: auto; }
.bootstrap-tags ul.tags-suggestion-list li.tags-suggestion-highlighted {
color: white;
text-decoration: none;
background-color: #0081C2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); }
.bootstrap-tags .tags{
margin-bottom: 50px;
}
$(document.body).on('click', '.moreButton a', 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');
}
var $parent = $(this).closest('article');
$('.morePanel', $parent).toggle();
$('.sumaryPanel', $parent).toggle();
});
