"Filtering div"
Bootstrap 3.2.0 Snippet by keshavkatwe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="">
<h2>Filtering divs</h2>
</div>
<div>
<button class="btn btn-primary filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="photo">Photo</button>
<button class="btn btn-default filter-button" data-filter="graphic">Graphic</button>
<button class="btn btn-default filter-button" data-filter="webdesign">Web design</button>
</div>
<br/>
<div class="row">
<div class="col-md-3 filter photo">
<div class="each-item">
<img class="port-image" src="http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg"/>
<div class="cap1">
<h3>Car show</h3>
<p>A car showroom for all verities of cars to display</p>
</div>
<div class="cap2">
<p class="text-center">Visit</p>
</div>
</div>
</div>
<div class="col-md-3 filter graphic photo">
<div class="each-item">
<img class="port-image" src="http://www.wpchats.com/wp-content/uploads/2011/11/Mixfolio-Wordpress-HTML5-Portfolio-Theme.jpg"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.port-image
{
width: 100%;
}
.col-md-3
{
margin-bottom:20px;
}
.each-item
{
position:relative;
overflow:hidden;
}
.each-item:hover .cap2, .each-item:hover .cap1
{
left:0px;
}
.cap1
{
position:absolute;
width:100%;
height:70%;
background:rgba(255, 255, 255, 0.5);
top:0px;
left:-100%;
padding:10px;
transition: all .5s;
}
.cap2
{
position:absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

can we add checkboxes to filter images?

hmunna36 () - 7 years ago - Reply 0


hello mate,

really nice solution just want to know one thing can i set other tab by default instead of "all"

websamosa () - 7 years ago - Reply 0


Solved :)

<script>

$(document).ready(function(){
var valueOnLoad = "graphic";
$(".filter").not('.'+valueOnLoad).hide('3000');
$(".filter").not('.'+valueOnLoad).hide('3000');

$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
$(".filter").not('.'+value).hide('3000')
$('.filter').filter('.'+value).show('3000')

});

});

</script>

websamosa () - 7 years ago - Reply 0