Bootstrap 3 collapse (only show specific columns) - twitter-bootstrap-3

Question

I am new to web coding entirely and I'm trying to create a grid of art projects for an online portfolio using bootstrap.
I'm trying to make specific columns show on a grid when the relevant button is clicked.
Currently when I click the text 'Video' it hides everything that isn't a video project as desired, but if I then click 'Photo', the video projects will hide and the photo projects will still be hidden and won't show.
Here's my code:
<div class="jumbotron text-center">
Video |
Photo
</div>
<div class="container-fluid">
<div class="row-fluid text-center">
<div class="collapse in col-xs-6 col-sm-4 col-md-3 novideotag">
<p>example: photo project 1</p>
</div>
<div class="collapse in col-xs-6 col-sm-4 col-md-3 nophototag">
<p>example: video project 1</p>
</div>
</div>
I want to be able to click 'Video' and show only video projects, click 'Photo' and show only photo projects but I'm not sure I'm going about it the right way; perhaps some javascript is required?

Answer 1

Below is a very basic jQuery solution to implement the show and hide feature. First assign a ID to the link and use the click() method of jQuery to initiate the click event. e.preventDefault() is used to override the browser's default click behaviour.
To implement the show and hide, call show(), hide() or slideUp(), slideDown() methods. There are many ways to do this. But this is one of the alternatives.
$('#video').click(function(e) {
e.preventDefault();
$('.novideotag, .design').slideUp();
$('.nophototag').slideDown();
});
$('#photo').click(function(e) {
e.preventDefault();
$('.nophototag, .design').slideUp();
$('.novideotag').slideDown();
});
$('#design').click(function(e) {
e.preventDefault();
$('.nophototag, .novideotag').slideUp();
$('.design').slideDown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
Video |
Photo |
Design
</div>
<div class="container-fluid">
<div class="row-fluid text-center">
<div class="collapse in col-xs-4 col-sm-4 col-md-4 novideotag">
<img src="http://placehold.it/200x200" />
<p>example: photo project 1</p>
</div>
<div class="collapse in col-xs-4 col-sm-4 col-md-4 nophototag">
<img src="http://placehold.it/200x200" />
<p>example: video project 1</p>
</div>
<div class="collapse in col-xs-4 col-sm-4 col-md-4 design">
<img src="http://placehold.it/200x200" />
<p>example: Design Project</p>
</div>
</div>