How to Show and Hide div elements using radio buttons?
In order to display data/content of a specific element by selecting the particular radio button in jQuery we can use the following two methods:
- hide() methods: This method is used to hiding the syntax or the element of html that you want to hide.
Syntax:$(selector).hide(speed, callback);
- show() methods: This method is used to show the syntax or the element of html that you want the user to see.
Syntax:$(selector).show(speed, callback);
Approach:
- Selector name for radio button is same as the element which is used to display the
content. - CSS display property of each element is set to none using display: none;
- Use show() method for displaying the element, otherwise use hide() method for hiding.
Example 1:
<!DOCTYPE html> <html> <head> <title> Show and Hide div elements using radio buttons </title> <script src= </script> <style type="text/css"> .selectt { color: #fff; padding: 30px; display: none; margin-top: 30px; width: 60%; background: green } label { margin-right: 20px; } </style> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Show and Hide div elements using radio buttons </h3> <div> <label> <input type="radio" name="colorRadio" value="C"> C</label> <label> <input type="radio" name="colorRadio" value="Cplus"> C++</label> <label> <input type="radio" name="colorRadio" value="Python"> Python</label> <label> <input type="radio" name="colorRadio" value="Java"> Java</label> </div> <div class="C selectt"> <strong>C</strong> is a procedural programming language</div> <div class="Cplus selectt"> <strong>C++</strong> is a general purpose programming language</div> <div class="Python selectt"> <strong>Python</strong> is a widely used general-purpose, high level programming language.</div> <div class="Java selectt"> <strong>Java</strong> is a most popular programming language for many years.</div> <script type="text/javascript"> $(document).ready(function() { $('input[type="radio"]').click(function() { var inputValue = $(this).attr("value"); var targetBox = $("." + inputValue); $(".selectt").not(targetBox).hide(); $(targetBox).show(); }); }); </script> </center> </body> </html> |
chevron_right
filter_none
Output:
- Before selecting the any radio button:
- After selecting the radio button:
Example 2: Along with alert method.
<!DOCTYPE html> <html> <head> <title> Show and Hide div elements using radio buttons </title> <script src= </script> <style type="text/css"> .selectt { color: #fff; padding: 30px; display: none; margin-top: 30px; width: 60%; background: green } label { margin-right: 20px; } </style> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Show and Hide div elements using radio buttons </h3> <div> <label> <input type="radio" name="colorRadio" value="C"> C</label> <label> <input type="radio" name="colorRadio" value="Cplus"> C++</label> <label> <input type="radio" name="colorRadio" value="Python"> Python</label> <label> <input type="radio" name="colorRadio" value="Java"> Java</label> </div> <div class="C selectt"> <strong>C</strong> is a procedural programming language</div> <div class="Cplus selectt"> <strong>C++</strong> is a general purpose programming language</div> <div class="Python selectt"> <strong>Python</strong> is a widely used general-purpose, high level programming language.</div> <div class="Java selectt"> <strong>Java</strong> is a most popular programming language for many years.</div> <script type="text/javascript"> $(document).ready(function() { $('input[type="radio"]').click(function() { var inputValue = $(this).attr("value"); var targetBox = $("." + inputValue); $(".selectt").not(targetBox).hide(); $(targetBox).show(); alert("Radio button " + inputValue + " is selected"); }); }); </script> </center> </body> </html> |
chevron_right
filter_none
Output:
- Before selecting the any radio button:
- After selecting the radio button:
- After selecting the radio button:
