Show and Hide div on radio button click using JavaScript & jQuery

There are certain cases when you need to hide & show divs on basis of some click event ! Here is one of the basic usage of JavaScript & jQuery to show & hide divs on click of radio buttons.

Checkout in action Down pointing backhand index

Checkout above video for step by step guide for both native JavaScript and jQuery code. – Please checkout my YouTube channel and subscribe for more technical videos and tutorials.

Please leave your comments , if you found above code useful. so , I can improve it from your suggestions.

42 thoughts on “Show and Hide div on radio button click using JavaScript & jQuery

  1. Thanks for this. It helped me out a lot. My problem was a variation on this. I wanted to control 1 div from a radio button group. Here is how I modified it

    $(document).ready(function () {
    $(‘#MoreInfoHide’).click(function () {

    $(‘#MoreInfo’).click(function () {

    Here is my HTML


    If someone answered no I wanted to ask for more information


  2. Block of Showing Item should be auto hidden by that when a radio option selected then only one item should be shown here…


  3. Hi, i have a bit of trouble trying to implement this in a table. Would you mind telling me what is wrong with it? I have 4 radio buttons, where if one clicked, a few rows should be shown based on it. I think i may have messed up the coding or I may have put it wrongly. Will you please explain to me in detail as I’m a beginner in this >< Also, how do you collaborate this with php(pdo) if I want to take the inputs to the database?


  4. Your script is very fine. But there is some improvement needed. When the page loads both divs should be hidden. In your script both are visible on page load and when radio button a selected then respective dive content is shown.


    • Hey Daroath,

      Thanks for your feedback.

      I think you can assign unique id to each form and inside each click event, you can add logic to show and hide each form inside div..!!


    • Hello Tunji,You can write as below.

      $(document).ready(function () {

      This will show only first div on page load. After this you can put click event.


  5. Hi, Thanks again for this example.

    Would the same concept be possible but with the use of a table to hide and show certain rows with the use of a radio button?



  6. Hey Milap,

    Thank you buddy…!

    In my div2 I have check box selection , when I submit form with radio_1 it taking div2 checked items also .How can I limit this …..?


  7. Is it possible to have all of the dynamic divs hidden when the page loads? I only want the text to show if a radio button is clicked. Thanks for the script!


    • Yes Paul , you can hide both divs on page load.
      Just add below line on load function.


      You are done. Enjoy..!!


      • and where is that actually?

        where should i add this lines:

        so the divs dont show on pageload?


      • You can write like this :-

        $(document).ready(function() {
        This will hide both divs on pageload…


I like to hear from you about this !!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.