Javascript / jquery

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

Milap42 Comments

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.

https://www.youtube.com/c/CodeCanvas/ – 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

    http://code.jquery.com/jquery-latest.js

    $(document).ready(function () {
    $(‘#MoreInfoHide’).click(function () {
    $(‘#dvMoreInfo’).hide(‘fast’);

    });
    $(‘#MoreInfo’).click(function () {
    $(‘#dvMoreInfo’).show(‘fast’);
    });
    });

    Here is my HTML

    Yes
    No

    If someone answered no I wanted to ask for more information

    Like

    Reply

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

    Like

    Reply

  5. 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?

    Like

    Reply

  12. 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.

    Like

    Reply

    • 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..!!

      Like

      Reply

    • Hello Tunji,You can write as below.

      $(document).ready(function () {
      $(‘#div1’).show(‘fast’);
      $(‘#div2’).hide(‘fast’);
      });

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

      Like

      Reply

  21. 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?

    Thanks

    Like

    Reply

  22. 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 …..?

    Like

    Reply

  23. 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!

    Like

    Reply

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

      $(‘#div1’).hide();
      $(‘#div2’).hide();

      You are done. Enjoy..!!

      Like

      Reply

      • and where is that actually?

        where should i add this lines:
        $(‘#div1′).hide();
        $(‘#div2′).hide();

        so the divs dont show on pageload?

        Like

      • You can write like this :-

        $(document).ready(function() {
        $(‘#div1′).hide();
        $(‘#div2′).hide();
        }
        This will hide both divs on pageload…

        Like

I like to hear from you about this !!

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