Show and Hide div on radio button click using jquery

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

Checkout in action :-

http://jsfiddle.net/3ZnGj/3/

<html>
       <head>
             <title>show-hide-div-on-click-using-jquery</title>
             <script src="http://code.jquery.com/jquery-latest.js"></script>
             <script type="text/javascript">
                 $(document).ready(function () {
                    $('#id_radio1').click(function () {
                       $('#div2').hide('fast');
                       $('#div1').show('fast');
                });
                $('#id_radio2').click(function () {
                      $('#div1').hide('fast');
                      $('#div2').show('fast');
                 });
               });
</script>
</head>

<body>
     <center>
             <h2>show hide div on click using jquery</h2>
              <div style="padding:25px;width: 100px;">
                   <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1
                   <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2
              </div>
              <div align="center" style="padding:25px;width: 300px;">
                   <div id="div1">This is First (1st) division</div>
                   <div id="div2">This is Second (2nd) division</div>
              </div>
     </center>
</body>
</html>

Thats it..

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

Advertisements

39 thoughts on “Show and Hide div on radio button click using jquery

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

    Like

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

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

    • 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

    • 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

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

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

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

    • 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

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

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s