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

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

i have next html elements:

#categoryid dropdown/select #addfoo button #removefoo button #foo div #bar div

i'm using next script alter visibility of these elements based on what's selected on 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 improve way it?

you can give mutual class name foo (or data- attribute, whichever prefer) foo elements:

class="snippet-code-js lang-js prettyprint-override">$('#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"); // demo purpose class="snippet-code-css lang-css prettyprint-override">.invisible { display:none; } div { /*for demo purpose*/ height:50px; line-height:50px; text-align:center; color:#fff; background:dodgerblue; } class="snippet-code-html lang-html prettyprint-override"><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 must utilize id's, can utilize attribute contains selector like:

class="snippet-code-js lang-js prettyprint-override">$('#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"); // demo purpose class="snippet-code-css lang-css prettyprint-override">.invisible { display:none; } div { /*for demo purpose*/ height:50px; line-height:50px; text-align:center; color:#fff; background:dodgerblue; } class="snippet-code-html lang-html prettyprint-override"><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, a. wolff mentioned in comments, can pass status returns true/false decides whether add together or remove class respectively, sec argument toggleclass() method.

class="snippet-code-js lang-js prettyprint-override">$('#categoryid').change(function () { $('.foo').toggleclass('invisible', this.value !== 'foo'); $('#bar').toggleclass('invisible', this.value !== 'bar'); }).trigger("change"); // demo purpose class="snippet-code-css lang-css prettyprint-override">.invisible { display:none; } div { /* demo purpose */ height:50px; line-height:50px; text-align:center; color:#fff; background:dodgerblue; } class="snippet-code-html lang-html prettyprint-override"><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: others suggested can utilize show() , hide() methods, i'm assuming there reason you're using css classes - injected inline styles having higher specificity other class definitions...

javascript jquery toggle