Html – jquery – selecting a radio button crossfades div onclick

htmljqueryonclickradio-button

I have search all over google for this and nothing. I am going off what i stared and found.

I have multiply radio buttons that i need to change a corresponding DIV when checked.
I need to have the value free so and onlclick command would be better.
PS: if i can have it fxfade instead of slideup and down it would help too.

buttons

  <input type="radio" name="myRadio" value="myDiv_1" />MyDiv2<br />
    <input type="radio" name="myRadio" value="myDiv_2" />MyDiv3<br />
    <input type="radio" name="myRadio" value="myDiv_3" />MyDiv4<br />

div's

<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>

code i have so far

    <script type="text/javascript">
$(document).ready(function(){

    $('.MyDiv').hide();

    $('input[name="myRadio"]').change(function(){
        var selected = $(this).val();
        $('.MyDiv').slideUp();
        $('#'+selected).slideDown();
    });

});
</script>

Best Answer

Is your code not working? Your slideUp() and slideDown() will occur at the same time, so you might want to use a callback (and here with fading which I think you want):

$('input[name="myRadio"]').click(function() {
    var selected = $(this).val();
    $('.MyDiv').fadeOut("slow",function() {
        $('#' + selected).fadeIn("slow");
    });
});
Related Topic