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:
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: