How to Show and Hide div Elements Using Radio Buttons
In this article, we will explore two methods to achieve this functionality using jQuery:
- Using the
hide()andshow()methods. - Using the
css()method.
1. Using the hide() and show() Methods
The hide() and show() methods in jQuery are used to toggle the visibility of elements by applying display: none and display: block, respectively.
Syntax
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
Example
In the following example, selecting a radio button shows a corresponding div while hiding all others.
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide Div Using Radio Buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.content {
display: none;
padding: 20px;
margin-top: 10px;
background-color: lightblue;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Select a Programming Language:</h2>
<label><input type="radio" name="lang" value="html"> HTML</label>
<label><input type="radio" name="lang" value="css"> CSS</label>
<label><input type="radio" name="lang" value="js"> JavaScript</label>
<div class="html content">HTML stands for HyperText Markup Language.</div>
<div class="css content">CSS stands for Cascading Style Sheets.</div>
<div class="js content">JavaScript is a scripting language for web development.</div>
<script>
$(document).ready(function () {
$('input[name="lang"]').click(function () {
const selectedValue = $(this).val();
$(".content").hide(); // Hide all divs
$("." + selectedValue).show(); // Show the selected div
});
});
</script>
</body>
</html>
Output
- Select HTML: "HTML stands for HyperText Markup Language" will appear.
- Select CSS: The HTML
divwill hide, and "CSS stands for Cascading Style Sheets" will appear.
2. Using the css() Method
The css() method lets you manipulate the inline CSS properties of an element. We can use it to set the display property dynamically.
Syntax
$(selector).css('property', 'value');
Example
Here's how you can achieve the same functionality using the css() method:
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide Div Using Radio Buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.content {
display: none;
padding: 20px;
margin-top: 10px;
background-color: lightcoral;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Select a Programming Language:</h2>
<label><input type="radio" name="lang" value="html"> HTML</label>
<label><input type="radio" name="lang" value="css"> CSS</label>
<label><input type="radio" name="lang" value="js"> JavaScript</label>
<div class="html content">HTML stands for HyperText Markup Language.</div>
<div class="css content">CSS stands for Cascading Style Sheets.</div>
<div class="js content">JavaScript is a scripting language for web development.</div>
<script>
$(document).ready(function () {
$('input[name="lang"]').click(function () {
const selectedValue = $(this).val();
$(".content").css('display', 'none'); // Hide all divs
$("." + selectedValue).css('display', 'block'); // Show the selected div
});
});
</script>
</body>
</html>
Key Differences
| Method | Approach | Ease of Use |
|---|---|---|
hide()/show()
|
Uses predefined jQuery methods | Simple and quick |
css() |
Manually modifies display property |
More control |
Conclusion
Both methods allow you to toggle div elements using radio buttons. If you're looking for simplicity, the hide() and show() methods are more straightforward. For more flexibility, the css() method gives better control over the element's style.
Top comments (0)