CODEWITHSUNDEEP
javascriptjquerytoggle
dotnetN00b
dotnetN00b

Reputation: 5131

How to toggle the visibility of multiple elements based of dropdown value

I have the following HTML Elements:

#categoryid is a dropdown/select
#addFoo is a button
#removeFoo is button
#Foo is a div
#Bar is a div

I'm using the following script to change the visibility of these elements based on what's selected on the dropdown:

$('#categoryid').change(function () {
    var category = $(this).val();
    if (category === 'Foo') {
        $('#addFoo').removeClass('invisible');
        $('#removeFoo').removeClass('invisible');
        $('#Foo').removeClass('invisible');
    }
    else if (category === 'Bar') {
        $('#Bar').removeClass('invisible');
    }

    if (category !== 'Foo') {
        $('#addFoo').addClass('invisible');
        $('#removeFoo').addClass('invisible');
        $('#Foo').addClass('invisible');
    }

    if (category !== 'Bar') {
        $('#Bar').addClass('invisible');
    }
});

CSS

.invisible {
   display:none;
}

Is there a better way to do it?

Upvotes: 1

Views: 728

Answers (3)

T J
T J

Reputation: 43156

You can give a common class name foo (or a data- attribute, whichever you prefer) for those Foo elements:

$('#categoryid').change(function () {
    if (this.value === 'Foo') {
        $('.foo').removeClass('invisible');
        $('#Bar').addClass('invisible');
    } else if (this.value === 'Bar') {
        $('#Bar').removeClass('invisible');
        $('.foo').addClass('invisible');
    }
}).trigger("change"); // for demo purpose
.invisible {
    display:none;
}

div { /*for demo purpose*/
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    background:dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryid">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
</select>
<div id="Foo" class="foo">Foo!</div>
<div id="Bar">Bar!</div>
<button id="addFoo" class="foo">add Foo!</button>
<button id="removeFoo" class="foo">remove Foo!</button>

Or if you must use those id's, you can use attribute contains selector like:

$('#categoryid').change(function () {
    if (this.value === 'Foo') {
        $('[id*="Foo"]').removeClass('invisible');
        $('#Bar').addClass('invisible');
    } else if (this.value === 'Bar') {
        $('#Bar').removeClass('invisible');
        $('[id*="Foo"]').addClass('invisible');
    }
}).trigger("change"); // for demo purpose
.invisible {
    display:none;
}

div { /*for demo purpose*/
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    background:dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryid">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
</select>
<div id="Foo"></div>
<div id="Bar"></div>
<button id="addFoo">add Foo!</button>
<button id="removeFoo">remove Foo!</button>

Update

Even better, As A. Wolff mentioned in comments, you can pass a condition that returns true/false which decides whether to add or remove the class respectively, as second argument to toggleClass() method.

$('#categoryid').change(function () {
   $('.foo').toggleClass('invisible', this.value !== 'Foo');
   $('#Bar').toggleClass('invisible', this.value !== 'Bar');
}).trigger("change"); // for demo purpose
.invisible {
    display:none;
}

div { /* for demo purpose */
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    background:dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryid">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
</select>
<div id="Foo" class="foo">Foo!</div>
<div id="Bar">Bar!</div>
<button id="addFoo" class="foo">add Foo!</button>
<button id="removeFoo" class="foo">remove Foo!</button>

Side note: As others suggested you can use show() and hide() methods, but i'm assuming There is be reason you're using css classes - Like the injected inline styles having higher specificity than other class definitions...

Upvotes: 2

user3787163
user3787163

Reputation: 11

You can directly use show(), hide(), slideUp(), slideDown() methods present in jQuery:

$('#divid').show();

Upvotes: -1

Andreas Furster
Andreas Furster

Reputation: 1638

Sure! Use jquery .hide() and .show() or .toggle()

Upvotes: 0

Related Questions