List filter toggle thing

Developer
Alan Shortis
Size
2,601 Kb
Views
14,168
  1. List filter toggle thing Previews
  2. List filter toggle thing HTML Codes
  3. List filter toggle thing CSS Codes
  4. List filter toggle thing JS Codes

How do I make an list filter toggle thing?

What is a list filter toggle thing? How do you make a list filter toggle thing? This script and codes were developed by Alan Shortis on 14 November 2022, Monday.

List filter toggle thing Previews
IQ Test

List filter toggle thing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>List filter toggle thing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="controls"> <input type="checkbox" class="js--filter-control" id="dev" checked><label class="controls__label" for="dev">Development</label> <input type="checkbox" class="js--filter-control" id="music" checked><label class="controls__label" for="music">Music</label> </div> <ul class="posts"> <li class="posts__item js--item" data-cat="music">Music article</li> <li class="posts__item js--item" data-cat="dev">Dev article</li> <li class="posts__item js--item" data-cat="music">Music article</li> <li class="posts__item js--item" data-cat="dev">Dev article</li> <li class="posts__item js--item" data-cat="music">Music article</li> <li class="posts__item js--item" data-cat="dev">Dev article</li> <li class="posts__item js--item" data-cat="music">Music article</li> <li class="posts__item js--item" data-cat="dev">Dev article</li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>

List filter toggle thing - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
html, body { height: 100%;
}
body { background: #333333; color: #ffffff; font-family: 'Roboto';
}
.container { width: 100%; max-width: 600px; margin: 0 auto;
}
.controls { text-align: right; padding: 1rem .5rem; background: #444444;
}
.controls__label:not(:last-child) { margin-right: 1rem;
}
.posts__item { padding: .5rem; border-bottom: 1px solid #444444;
}
.posts__item:last-child { border-bottom: 0;
}

List filter toggle thing - Script Codes JS Codes

var filterControl = document.querySelectorAll('.js--filter-control');
var postItems = document.querySelectorAll('.js--item');
for (var i = 0; i < filterControl.length; i++) { filterControl[i].addEventListener('change', function() { if (this.checked) { for (var i = 0; i < postItems.length; i++) { if (postItems[i].dataset.cat == this.id) { postItems[i].style.display = 'block'; } } for (var i = 0; i < filterControl.length; i++) { if (filterControl[i].id != this.id) { filterControl[i].disabled = false; } } } else { for (var i = 0; i < postItems.length; i++) { if (postItems[i].dataset.cat == this.id) { postItems[i].style.display = 'none'; } } for (var i = 0; i < filterControl.length; i++) { if (filterControl[i].id != this.id) { filterControl[i].disabled = true; } } } });
}
List filter toggle thing - Script Codes
List filter toggle thing - Script Codes
Home Page Home
Developer Alan Shortis
Username alanshortis
Uploaded November 14, 2022
Rating 3
Size 2,601 Kb
Views 14,168
Do you need developer help for List filter toggle thing?

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!

Alan Shortis (alanshortis) Script Codes
Name
Spotify Artist Radio Thumbnails
CSS Tooltips
Burger menu icon
Single div CSS loaders
Orb
2D fluid image
Toggle Buttons
Scope Bar
Subtle animated gradient background
Shaft of Light
Create amazing art & images 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!