-
-
Save pedro-mendonca/de3e9d7b3fddd3119f3520ad880e5bf7 to your computer and use it in GitHub Desktop.
Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap Demo: https://jsbin.com/jeyadac
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Author: Akshay Nagpal (github.com/akshaynagpal) | |
| License: MIT | |
| */ | |
| $(document).ready(function(){ | |
| // clicking button with class "category-button" | |
| $(".category-button").click(function(){ | |
| // get the data-filter value of the button | |
| var filterValue = $(this).attr('data-filter'); | |
| // show all items | |
| if(filterValue == "all") | |
| { | |
| $(".all").show("slow"); | |
| } | |
| else | |
| { | |
| // hide all items | |
| $(".all").not('.'+filterValue).hide("slow"); | |
| // and then, show only items with selected data-filter value | |
| $(".all").filter('.'+filterValue).show("slow"); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="author" content="Akshay Nagpal | akshaynagpal.me"/> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <!-- jQuery library --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <!-- Latest compiled JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="filter-gallery.js"></script> | |
| <title>Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap</title> | |
| </head> | |
| <body> | |
| <div id="items" class="container-fluid"> | |
| <h1>Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap</h1> | |
| <!-- BUTTON GROUP FOR CATEGORIES --> | |
| <div class="btn-group"> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "all"> All </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category1"> Category 1 </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category2"> Category 2 </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category3"> Category 3 </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category4"> Category 4 </button> | |
| </div> | |
| <!-- END BUTTON GROUP FOR CATEGORIES --> | |
| <hr> | |
| <div class="col-sm-3 all category1 well"> | |
| <h1>ONE</h1> | |
| </div> | |
| <div class="col-sm-3 all category2 well"> | |
| <h1>TWO</h1> | |
| </div> | |
| <div class="col-sm-3 all category3 well"> | |
| <h1>THREE</h1> | |
| </div> | |
| <div class="col-sm-3 all category4 well"> | |
| <h1>FOUR</h1> | |
| </div> | |
| <div class="col-sm-3 all category2 well"> | |
| <h1>TWO</h1> | |
| </div> | |
| <div class="col-sm-3 all category1 well"> | |
| <h1>ONE</h1> | |
| </div> | |
| <div class="col-sm-3 all category4 well"> | |
| <h1>FOUR</h1> | |
| </div> | |
| <div class="col-sm-3 all category3 well"> | |
| <h1>THREE</h1> | |
| </div> | |
| <div class="col-sm-3 all category1 well"> | |
| <h1>ONE</h1> | |
| </div> | |
| <div class="col-sm-3 all category2 well"> | |
| <h1>TWO</h1> | |
| </div> | |
| <div class="col-sm-3 all category3 well"> | |
| <h1>THREE</h1> | |
| </div> | |
| <div class="col-sm-3 all category4 well"> | |
| <h1>FOUR</h1> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment