Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Automatically Open the Detail Menu on Search for Buttons?
Buttons are clickable elements in HTML that perform actions. They have the ability to submit a form, reset a form, or perform a JavaScript function. They are defined by the <button> or <input> tags. Buttons created using the <button> tag can hold content such as text, icons, images, and so on.
The <input> tag specifies a data entry field for the user. The most important form element is the <input> element. Depending on the type attribute, it can be displayed in a variety of ways. Text is the most common and widely used input type.
Consider the code below, which includes a search bar that searches the button elements within the detail menu. We must manually click/open the detail menu before performing the search.
Example
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Search bar for button elements </title>
<style>
#container {
width: 250px;
height: 90px;
background-color: bisque;
padding: 20px;
}
button {
margin-right: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id= "container">
<input type= "text" id= "search_bar" onkeyup= "searchfunction()" placeholder= "Search.." title= "Type in a category">
<div>
<details id= "search" class= "finding-section">
<summary id= "summary"> Colours </summary>
<button class= "finding-button" id= "violet"> Violet </button>
<button class= "finding-button" id= "indigo"> Indigo </button>
<button class= "finding-button" id= "blue"> Blue </button>
<button class= "finding-button" id= "green"> Green </button>
<button class= "finding-button" id= "yellow"> Yellow </button>
<button class= "finding-button" id= "orangered"> Orangered </button>
</details>
</div>
</div>
<script>
const searchbar = document.getElementById('search_bar');
searchbar.addEventListener('keyup', (event) => {
const searchKey = event.target.value;
const nodes = document.querySelectorAll('.finding-button');
nodes.forEach(node => {
node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
})
})
</script>
</body>
</html>
As we can observe, we must manually click/open the detail menu before performing the search. Now, we will how to code this in a way that the detail menu opens automatically on search.
Using the ‘open’ Attribute
The open attribute in HTML is used to specify whether the details will be displayed when the page loads. This is a boolean property. Details are not displayed if it is not present by default.
Syntax
<details open> --content-- </details>
Example
In this example we will add the open attribute in the details tag so that the details are displayed by default.
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Search bar for button elements </title>
<style>
#container {
width: 250px;
height: 90px;
background-color: darkcyan;
padding: 20px;
font-size: 17px;
font-weight: bold;
}
button {
margin-right: 10px;
margin-top: 10px;
background-color: aliceblue;
color: slategray;
font-weight: bold;
border: 0;
}
input {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id= "container">
<input type= "text" id= "search_bar" onkeyup= "searchfunction()" placeholder= "Search.." title= "Type in a category">
<div>
<details id= "search" class= "finding-section" open>
<summary id= "summary"> Colours </summary>
<button class= "finding-button" id= "violet"> Violet </button>
<button class= "finding-button" id= "indigo"> Indigo </button>
<button class= "finding-button" id= "blue"> Blue </button>
<button class= "finding-button" id= "green"> Green </button>
<button class= "finding-button" id= "yellow"> Yellow </button>
<button class= "finding-button" id= "orangered"> Orangered </button>
</details>
</div>
</div>
<script>
function searchfunction() {
const searchbar = document.getElementById('search_bar');
searchbar.addEventListener('keyup', (event) => {
const searchKey = event.target.value;
const nodes = document.querySelectorAll('.finding-button');
nodes.forEach(node => {
node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
})
})
}
</script>
</body>
</html>
Example
We can check if our details have the open attribute and add it if it isn't set in the keyup handler.
<!DOCTYPE html>
<html lang= "en">
<head>
<title> Search bar for button elements </title>
<style>
#container {
width: 250px;
height: 90px;
background-color: midnightblue;
padding: 20px;
font-size: 17px;
font-weight: bold;
color: white;
}
button {
margin-right: 10px;
margin-top: 10px;
background-color: white;
color: dodgerblue;
font-weight: bold;
border: 0;
}
input {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id= "container">
<input type= "text" id= "search_bar" onkeyup= "searchfunction()" placeholder= "Search.." title= "Type in a category">
<div>
<details id= "search" class= "finding-section" open>
<summary id= "summary"> Colours </summary>
<button class= "finding-button" id= "violet"> Violet </button>
<button class= "finding-button" id= "indigo"> Indigo </button>
<button class= "finding-button" id= "blue"> Blue </button>
<button class= "finding-button" id= "green"> Green </button>
<button class= "finding-button" id= "yellow"> Yellow </button>
<button class= "finding-button" id= "orangered"> Orangered </button>
</details>
</div>
</div>
<script>
function searchfunction() {
const searchbar = document.getElementById('search_bar');
searchbar.addEventListener('keyup', (event) => {
const searchKey = event.target.value;
const details = document.getElementById('search');
if (!details.hasAttribute('open')) {
details.setAttribute('open', true);
}
if(searchKey== ' '){
details.removeAttribute('open');
}
const nodes = document.querySelectorAll('.finding-button');
nodes.forEach(node => {
node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
})
})
}
</script>
</body>
</html>
31 Views
