"Needs type. "
Bootstrap 3.2.0 Snippet by maksim09

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

Related: See More


Questions / Comments: