CODEWITHSUNDEEP
javascripthtmlcss
S.T.
S.T.

Reputation: 39

Radio button hide and show issue

I am trying to change the content by selecting the different radio button. My codes seem not working. Any problem with it? Here is the FIDDLE:

HTML

   <div id="category-table" style="display: block;">
            <div class="btn-group" data-toggle="buttons" style="float:right;">
                <label class="btn btn-show-category active">
                    <input type="radio" name="options" id="option1" autocomplete="off" value="A-categories" checked=""> A Categories
                </label>

                <label class="btn btn-show-category">
                     <input type="radio" name="options" id="option2" autocomplete="off" value="B-categories"> B Categories
                </label>
        </div>         

        <br><br>
            <div class="all-categories">
                <div class="content-header">Category A</span></div>
            </div>

            <div class="used-categories" style="display:none;">
                <div class="content-header">Category B</span></div>
            </div>

    </div>

JS

$(document).ready(function () {
    $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "A-categories") {
            $(".used-categories").hide();
            $(".all-categories").show();
        }
        if ($(this).attr("value") == "B-categories") {
            $(".all-categories").hide();
            $(".used-categories").show();
        }
    });
});

Any Suggestion?

Upvotes: 1

Views: 65

Answers (2)

nifCody
nifCody

Reputation: 2444

make the click event to change event in radio button.

I have update the fiddle check it out Here is the updated fiddle

Upvotes: 1

Lumi Lu
Lumi Lu

Reputation: 3305

enter image description here

Just check fiddle. It looks like you did not include jquery js file.

Upvotes: 1

Related Questions