How to use jQuery to show/hide divs based on radio button selection?

Question

I have some radio buttons and I\'d like to have different hidden divs show up based on which radio button is selected. Here\'s what the HTML looks like:

<         


        

Answer 1

Below code is perfectly workd for me:

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});

.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }

         red
         green
         blue
    
    
You have selected red radio button so i am here
    
You have selected green radio button so i am here
    
You have selected blue radio button so i am here