CODEWITHSUNDEEP
javascriptjquery
brunodd
brunodd

Reputation: 2584

Show/Hide div when click on radio

I've seen similar questions like this before but their example is using IDs. What if I want to use classes only?

jsfiddle

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $(".desc").hide(200);
        $(".desc" + test).show(200);
    });
});

Upvotes: 0

Views: 55

Answers (2)

Tharindu Kumara
Tharindu Kumara

Reputation: 4458

Since you have mentioned that you want to use only classes instead of IDs. You have to use unique class names for each HTML tag.

$(document).ready(function() {
  $("input[name$='cars']").click(function() {
    var selectedClass = $(this).attr("class");
    //alert(".dec" + selectedClass);
    $("div.desc").hide();

    $(".desc." + selectedClass).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="myRadioGroup">

  2 Cars
  <input type="radio" name="cars" checked="checked" value="2" class="2cars" />3 Cars
  <input type="radio" name="cars" value="3" class="3cars" />

  <div class="desc 2cars">
    2 Cars Selected
  </div>
  <div class="desc 3cars" style="display: none;">
    3 Cars
  </div>
</div>

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337714

If you wanted to remove the id attributes for identifying the div elements, you could use data() attributes instead. Try this:

<div class="desc" data-cars="2">2 Cars Selected</div>
<div class="desc" data-cars="3" style="display: none;">3 Cars</div>

$("div.desc").hide().filter(function() {
    return $(this).data('cars') == test;
}).show();

Example fiddle

Upvotes: 2

Related Questions