Show Hide Div On Radio Button Click Using jQuery

Last Updated on September 19, 2022 by Roshan Parihar

Use jQuery show() and hide() to Show Hide div on radio button selected. To do this, you need to add some style, script, and a few HTML. Hide each div which you want to display on select of the radio buttons.

The dynamic changes happen based on the click of the selected radio button selection. A hidden div display and the display:block property added to the displayed div element.

How to Show Hide Div On Radio Button Click or Selected in jQuery

Below is the example to show/hide div on the select of the radio button. You have to add the script, HTML, and, also some style CSS to hide the div at the start.

Output


One
Two
Three

“One” selected.
“Two” selected.
“Three” selected.

There are three radio buttons given above. On the selection of each radio button, a div will display. The dynamic change can handle by using the simple jQuery script as given above.

In addition to all these, don’t forget to add the display:none property to all the divs to hide them at the start and display them only on select of the radio buttons.

You may also like to read.

Reference