Basic jQuery Filter list
How do I make an basic jquery filter list?
Basic filtering of a list using data-attributed. What is a basic jquery filter list? How do you make a basic jquery filter list? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.
Basic jQuery Filter list - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic jQuery Filter list</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<ul class="boxes"> <div class="titles"> <h1>jQuery Filter Test</h1> <ul class="filters"> <li> <a href="#" data-filter="all">All</a> </li> <li> <a href="#" data-filter="green">Green</a> </li> <li> <a href="#" data-filter="blue">Blue</a> </li> <li> <a href="#" data-filter="red">Red</a> </li> </ul> </div> <li class="green" data-color="green"></li> <li class="blue" data-color="blue"></li> <li class="red" data-color="red"></li> <li class="green" data-color="green"></li> <li class="blue" data-color="blue"></li> <li class="red" data-color="red"></li> <li class="blue" data-color="blue"></li> <li class="green" data-color="green"></li> <li class="blue" data-color="blue"></li> <li class="red" data-color="red"></li> <li class="green" data-color="green"></li> <li class="green" data-color="green"></li> <li class="green" data-color="green"></li> <li class="blue" data-color="blue"></li> <li class="blue" data-color="blue"></li> <li class="red" data-color="red"></li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Basic jQuery Filter list - Script Codes CSS Codes
body { margin: 50px;
}
.wrap { width: 820px;
}
.titles { width: 462px; height: 306px; background: #bada55; display: inline-block; float: left; margin: 3px;
}
ul.filters li { float: left; display: inline-block; margin-right: 10px; height: auto; width: auto;
}
.boxes li { width: 150px; height: 150px; float: left; margin: 3px; list-style: none; transition: all 2s;
}
.boxes li.green { background: green;
}
.boxes li.blue { background: blue;
}
.boxes li.red { background: tomato;
}
Basic jQuery Filter list - Script Codes JS Codes
$('.filters a').click(function(){ var boxes = $('ul.boxes li'); var filter = $(this).data("filter"); boxes.hide(); if( filter == "all") { boxes.show('slow'); } else { filter = '.'+filter; boxes.filter(filter).show('slow'); } return false;
});
Developer | Matt Edwards |
Username | mtedwards |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,464 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
AussieTheatre Logo | 1,756 Kb |
JQuery YouTube Playlist | 2,120 Kb |
Calendar | 3,834 Kb |
Responsive layout with Fixed width Sidebar | 2,249 Kb |
A Quiz, reveal answers and keep score | 3,189 Kb |
Angular Form JSON test | 2,504 Kb |
JQuery .show .hide menu | 2,356 Kb |
Let it Rain | 2,746 Kb |
Angular Instagram test | 2,396 Kb |
Quiz | 2,814 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Awesome | Samarthpd | 2,901 Kb |
Video mute | Leon9208 | 2,131 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
GLSL Hills | Ykob | 6,991 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!