Created
April 26, 2018 08:51
-
-
Save amelieykw/2eba8362c6820d4f1a2b199f22c42b2e to your computer and use it in GitHub Desktop.
[Filter Dropdown Click] #filter #dropdown #click #W3.CSS #CSS #HTML
This file contains hidden or 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> | |
| <title>W3.CSS</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | |
| <body> | |
| <div class="w3-container"> | |
| <h2>Filter Dropdown Click</h2> | |
| <p>Click on the dropdown and search for a specific link inside the input field.</p> | |
| <div class="w3-dropdown-click"> | |
| <button class="w3-button w3-black" onclick="dropFunction()">Dropdown</button> | |
| <div class="w3-dropdown-content w3-bar-block w3-card w3-light-grey" id="myDIV"> | |
| <input class="w3-input w3-padding" type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> | |
| <a class="w3-bar-item w3-button" href="#about">About</a> | |
| <a class="w3-bar-item w3-button" href="#base">Base</a> | |
| <a class="w3-bar-item w3-button" href="#blog">Blog</a> | |
| <a class="w3-bar-item w3-button" href="#contact">Contact</a> | |
| <a class="w3-bar-item w3-button" href="#custom">Custom</a> | |
| <a class="w3-bar-item w3-button" href="#support">Support</a> | |
| <a class="w3-bar-item w3-button" href="#tools">Tools</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Dropdown | |
| function dropFunction() { | |
| var x = document.getElementById("myDIV"); | |
| if (x.className.indexOf("w3-show") == -1) { | |
| x.className += " w3-show"; | |
| } else { | |
| x.className = x.className.replace(" w3-show", ""); | |
| } | |
| } | |
| // Filter | |
| function filterFunction() { | |
| var input, filter, ul, li, a, i; | |
| input = document.getElementById("myInput"); | |
| filter = input.value.toUpperCase(); | |
| div = document.getElementById("myDIV"); | |
| a = div.getElementsByTagName("a"); | |
| for (i = 0; i < a.length; i++) { | |
| if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { | |
| a[i].style.display = ""; | |
| } else { | |
| a[i].style.display = "none"; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment