show/hide div based on radio clicked with class

Question

hello. I have 4 radio buttons that correspond to 4 different divs. i want to fadeOut the current div and then fadIn the new selected one. right now its working but just fades between images.

Also is there a way to change the divs based on the radio's class and not value?

Code I currently have:

<input type="radio" name="myRadio" class="myDiv_1" value="myDiv_1" />Image1<br />
<input type="radio" name="myRadio" class="myDiv_2" value="myDiv_2" />Image2<br />
<input type="radio" name="myRadio" class="myDiv_3" value="myDiv_3" />Image3<br />

<div id="myDiv_1" class="shade" style="display:block;"><img>TEXT BELOW IMAGE</div>
<div id="myDiv_2" class="shade" style="display:block;"><img>TEXT BELOW IMAGE</div>
<div id="myDiv_3" class="shade" style="display:block;"><img>TEXT BELOW IMAGE</div>

<script type="text/javascript">
$(document).ready(function(){
    $('input[name="myRadio"]').click(function() {
        var selected = $(this).val();
        $(".shade").fadeOut("slow");
        $('#' + selected).fadeIn("slow");
    });
});
</script>

Answer 1

Just replace

var selected = $(this).val();

with

var selected = $(this).attr("class");

And the div faded in depends on the class attribute of the input.

Additionally I suggest using this (which should be faster)

$("div.shade:visible").fadeOut("slow");

instead of

$(".shade").fadeOut("slow");

Answer 2

Yes, you can get the class of the object using jQuerys attr method:

var selected = $(this).attr("class");

Answer 3

"i want to fadeOut the current div and then fadIn the new selected one"

Use fadeOut() callback function:

$(".shade").fadeOut("slow", function() {
    $('#' + selected).fadeIn("slow");
});