Simple filtering by html5 targets.

Developer
Orrin Ward
Size
2,426 Kb
Views
4,048
  1. Simple filtering by html5 targets. Previews
  2. Simple filtering by html5 targets. HTML Codes
  3. Simple filtering by html5 targets. CSS Codes
  4. Simple filtering by html5 targets. JS Codes

How do I make an simple filtering by html5 targets.?

What is a simple filtering by html5 targets.? How do you make a simple filtering by html5 targets.? This script and codes were developed by Orrin Ward on 01 February 2023, Wednesday.

Simple filtering by html5 targets. Previews
IQ Test

Simple filtering by html5 targets. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple filtering by html5 targets.</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='filters'> <a data-target='item'>All</a> <a data-target='red-thing'>Red</a> <a data-target='blue-thing'>Blue</a> <a data-target='green-thing'>Green</a>
</div>
<div class='container'> <div class='item red-thing'></div> <div class='item blue-thing'></div> <div class='item green-thing'></div> <div class='item blue-thing'></div> <div class='item green-thing'></div> <div class='item red-thing'></div> <div class='item red-thing'></div> <div class='item blue-thing'></div> <div class='item green-thing'></div>
</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>

Simple filtering by html5 targets. - Script Codes CSS Codes

.filters { margin: 20px;
}
a { padding: 4px; background: #DDD;
}
a:hover { cursor: pointer; cursor: hand;
}
.container .item { width: 200px; height: 200px; margin: 10px; float: left;
}
.container .item.blue-thing { background: blue;
}
.container .item.green-thing { background: green;
}
.container .item.red-thing { background: red;
}

Simple filtering by html5 targets. - Script Codes JS Codes

$(".filters a").on("click", function(){ filter_option = "." + $(this).attr("data-target").toString(); $('.item').not(filter_option).fadeTo(300,0.1); $(filter_option).fadeTo(300,1);
})
Simple filtering by html5 targets. - Script Codes
Simple filtering by html5 targets. - Script Codes
Home Page Home
Developer Orrin Ward
Username orrinward
Uploaded February 01, 2023
Rating 3
Size 2,426 Kb
Views 4,048
Do you need developer help for Simple filtering by html5 targets.?

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!

Orrin Ward (orrinward) Script Codes
Name
Super Discount
A Pen by Orrin Ward
Price Comparison Table
Virtual Freshers Fair Layout
Leemail change delivery confim
Bootstrap form HAML
Expandable block items.
Leemail footer play
AfG App launcher slug SCSS
SMR2013 hack
Create amazing SEO content with AI!

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!