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 show/hide div element depending multiple values using Bootstrap and jQuery?
Sometimes, we may require to show and hide div based on the selected values. For example, you want to show the registration or login forms based on the radio button's selected value.
Below, we will learn to show/hide the div elements based on the selected value using JQuery.
Show/hide the div Element Depending on the Selected Value From the Select Menu
In JQuery, we can get the selected option’s value from the ‘select’ menu. After that, we can access the div element according to the selected option value and show them.
Syntax
Users can follow the syntax below to show/div elements depending on the selected value from the select menu.
$('select').on('change', function () {
var value = $(this).val();
$('div').each(function () {
$(this).hide();
});
$('#' + value).show();
});
In the above syntax, whenever the ‘change’ event occurs on the select menu, we get the value of the selected option. After that, we hide all div elements and show only the div with an id equal to the value of the selected option.
Example
In the example below, we have created the <select> menu and added options. Also, we have added the value attribute to every option. Furthermore, we created the div elements with the id equal to the value of the option elements.
In JQuery, we trigger the ‘change’ event on the select menu. In the callback function, we get the selected option’s value. After that, we iterate through all div elements and hide them using the hide() method. At last, we show only the div according to the selected option.
In the output, users can try to select different options, and it will show the different div elements.
<html>
<head>
<style> div{ background-color: aqua; width: 500px; padding: 2rem; margin-top: 1rem;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Show/hide div elements based on the selected value from the select menu</h3>
<select>
<option> Choose any value </option>
<option value = "first"> first </option>
<option value = "second"> second </option>
<option value = "third"> third </option>
<option value = "fourth"> fourth </option>
</select>
<div id = "first" style = "display:none"> <p> first </p> </div>
<div id = "second" style = "display:none"> <p> second </p> </div>
<div id = "third" style = "display:none"> <p> third </p> </div>
<div id = "fourth" style = "display:none"> <p> fourth </p> </div>
<script>
// use jQuery to show/hide div based on the value selected in the select menu
$(document).ready(function () {
$('select').on('change', function () {
var value = $(this).val();
$('div').each(function () {
$(this).hide();
});
$('#' + value).show();
});
});
</script>
</body>
</html>
Show/hide the div Element Depending on Whether the Checkbox Checked
Whenever users check or uncheck the Checkbox, we can show/hide the div element accordingly. For example, if users select multiple Checkboxes, we show multiple checkboxes according to the selected checkboxes.
Syntax
Users can follow the syntax below to show/hide the div elements based on the selected value of the checkbox.
var bool = $(this).attr("value");
$("#" + bool).toggle();
In the above syntax, we get the value of the checkbox. Whenever the user clicks the checkbox, we show if the checkbox is hidden; Otherwise, we hide the checkbox using the toggle() method.
Example
In the example below, we have created multiple checkboxes and given the value to every checkbox. We have created the div elements with the id equal to the checkbox value.
In JQuery, whenever a user clicks on any checkbox, we get the checkbox value and toggle its display style using the toggle() method to show/hide div elements.
Using this approach, we can show multiple div elements if multiple checkboxes are selected.
<html>
<head>
<style> div { background-color: aqua; width: 500px; padding: 2rem; margin-top: 1rem;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Show/hide div elements based on the selected checkbox</h2>
<label for = "first_check"> First </label> <input type = "checkbox" id = "first_check" name = "first_check" value="first">
<label for = "second_check"> Second </label> <input type = "checkbox" id = "second_check" name = "second_check" value = "second">
<label for = "third_check"> Third </label> <input type = "checkbox" id = "third_check" name = "third_check" value = "third">
<label for = "fourth_check"> Fourth </label> <input type = "checkbox" id = "fourth_check" name = "fourth_check" value = "fourth">
<div id = "first" style = "display:none"> <p> first </p> </div>
<div id = "second" style = "display:none"> <p> second </p> </div>
<div id = "third" style = "display:none"> <p> third </p> </div>
<div id = "fourth" style = "display:none"> <p> fourth </p> </div>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var bool = $(this).attr("value");
$("#" + bool).toggle();
});
});
</script>
</body>
</html>
Show/hide the div element depending on the selected radio button
Users can select any single value from the group of radio buttons. When the user selects any radio button, we can hide all other div elements except the respected div to the selected radio element.
Syntax
Users can follow the syntax below to hide/show div elements based on the selected radio button’s value.
$('div').each(function () {
if ($(this).attr("id") == bool) {
$(this).show();
} else {
$(this).hide();
}
});
In the above syntax, we iterate through all div elements and show only a single div if it is respected to the selected radio button. Otherwise, we hide the div elements.
Example
In the example below, we have created the radio button group and given different values to every radio button. In JQuery, whenever users click the radio button, we get the value of the radio button. After that, we use each() method to iterate through all div elements. While iterating through the div elements, we check if the value of the radio button is equal to the id of the div element, and we show the div element. Otherwise, we hide the div element.
<html>
<head>
<style> div { width: 500px; padding: 2rem; margin-top: 1rem; }</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Show/hide div elements based on the selected radio button</h3>
<label for = "first_check"> First </label> <input type="radio" id="first_check" name="group_1" value = "first">
<label for = "second_check"> Second </label> <input type="radio" id="second_check" name="group_1" value="second">
<label for = "third_check"> Third </label> <input type="radio" id="third_check" name="group_1" value="third">
<div id = "first" style = "display:none;background-color: pink;"> <p> first </p> </div>
<div id="second" style="display:none;background-color: blue;"> <p>second</p> </div>
<div id="third" style="display:none;background-color: green;"> <p>third</p> </div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var bool = $(this).attr("value");
$('div').each(function () {
if ($(this).attr("id") == bool) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
</body>
</html>
Users learned to show single or multiple divs based on the selected values. In the first approach, we have shown the div element according to the selected value from the select menu. Users can use the second approach to show the multiple div elements based on the multiple selected value. Again, the third approach will work like the first element to show a single div element based on the selected value.
2K+ Views
