Здравствуйте! Есть тема со встроенным isotope фильтром, который по умолчанию позволяет выбрать один четырех разделов или все сразу.
Вопрос, как сделать несколько фильтров, чтобы можно было выбирать не один а сразу несколько пунктов?
<section class="projects-section projects-page-section">
<div class="container">
<div class="title-section alt-title">
<div class="row">
<div class="col-md-5">
<h1>Latest Project</h1>
</div>
<div class="col-md-7">
<ul class="filter">
<li><a class="active" href="#" data-filter="*">Show All</a></li>
<li><a href="#" data-filter=".buildings">Buildings</a></li>
<li><a href="#" data-filter=".interior">Interior</a></li>
<li><a href="#" data-filter=".energy">Energy</a></li>
<li><a href="#" data-filter=".isolation">Isolation</a></li>
</ul>
</div>
</div>
</div>
<div class="project-box iso-call col3">
<div class="project-post buildings isolation">
<img src="upload/projects/1.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">Elegant Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/1.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post interior default-size">
<img src="upload/projects/3.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">Beatiful House</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/3.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post interior isolation">
<img src="upload/projects/5.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">Afarist Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/5.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post energy isolation">
<img src="upload/projects/7.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">traditional Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/7.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post interior buildings">
<img src="upload/projects/8.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">traditional Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/8.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post energy isolation buildings">
<img src="upload/projects/10.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">traditional Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/10.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post buildings isolation">
<img src="upload/projects/2.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">Elegant Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/2.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post interior">
<img src="upload/projects/4.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">Beatiful House</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/4.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
<div class="project-post interior isolation">
<img src="upload/projects/6.jpg" alt="">
<div class="hover-box">
<div class="inner-hover">
<h2><a href="single-project.html">Afarist Building</a></h2>
<span>bulding, house</span>
<a href="single-project.html" class="link"><i class="fa fa-link"></i></a>
<a href="upload/projects/6.jpg" class="zoom"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
