On default there are all the divs printed, I want on load to be printed only barcoffeshop classes. How to manipulate using js/jquery to display only barcoffeshop
<li class="filter" data-filter="all">All</li>
<li class="filter active" data-filter=".apartment">Appartment</li>
<li class="filter" data-filter=".barcoffeshop">Bar Coffe Shop</li>
<li class="filter" data-filter=".hotel">Hotel</li>
<li class="filter" data-filter=".pharmacy">Pharmacy</li>
<li class="filter" data-filter=".vila">Vila</li>
<li class="filter" data-filter=".office">office</li>
> class apartment below
<div
class="col-md-3 col-sm-6 mix apartament"
style="display: inline-block"
data-bound=""
>
<figure class="project-item imghvr-flip-vert">
<img
src="assets/img/imazhe/apartamente/apartment/BEDROOM 1 800X500.jpg"
alt=""
/>
<figcaption>
<div class="overlay">
<a href=""><h3>Apartament</h3></a>
<a href=""><i class="fa fa-external-link"></i></a>
<a
href="assets/img/imazhe/apartamente/apartment/BEDROOM 1 800X500.jpg"
class="work-popup"
>
<i class="fa fa-arrows-alt" aria-hidden="true"></i>
</a>
</div>
</figcaption>
</figure>
</div>
> class bacoffe shop below
<!-- work item -->
<div
class="col-md-3 col-sm-6 mix barcoffeshop"
style="display: inline-block"
data-bound=""
>
<figure class="project-item imghvr-flip-vert">
<img
src="assets/img/imazhe/Bar Caffe Shop/BAR CAFE 1 800X500.jpg"
alt=""
/>
<figcaption>
<div class="overlay">
<a href=""><h3>Bar Coffe</h3></a>
<a href=""><i class="fa fa-external-link"></i></a>
<a
href="assets/img/imazhe/Bar Caffe Shop/BAR CAFE 1 800X500.jpg"
class="work-popup"
>
<i class="fa fa-arrows-alt" aria-hidden="true"></i>
</a>
</div>
</figcaption>
</figure>
</div>
Is there any way to remove all the divs only on load, in order to display barcoffeshop
Select the list item with data-filter as barcoffeeshop and call .focus() on it using javaScript when the page loads.
Refer the CodePen for complete implementation: Click here