Toggle element class on checkbox state

Question

The class hidden should be toggling based on if the checkbox is checked. One of the drop-down menus should be hidden and the other be displayed.

maybe my ternary operator isn't set up properly.

Thanks in advance.

 function toggleButton() { var toggler = $("input[name='toggler']").prop('checked'); var awardOptions = $('#awardOptions'); var yearOptions = $('#yearOptions'); var awardShow = awardOptions.removeClass('hidden'); var yearShow = yearOptions.removeClass('hidden'); var awardHide = awardOptions.addClass('hidden'); var yearHide = yearOptions.addClass('hidden'); console.log(toggler); return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow); } $('#toggler').on('click', function(){ toggleButton(); }); 

 .hidden { display: none !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggleWrapper"> <input type="checkbox" class="dn" name="toggler" id="toggler" checked/> <label for="toggler" class="toggle"> <span class="toggle__handler"></span> </label> </div> <div class="inputBox" id="filter"> <div class="dropdown hidden" id="yearOptions"> <select id="hof-year"> <option value="0">Choose a Year</option> <option value="2016">2016</option> </select> </div> <div class="dropdown" id="awardOptions"> <select id="hof-accomp"> <option value="0">Choose an Award</option> </select> </div> </div> 

This is the function I'm using to trigger the toggleButton function.

$('#toggler').on('click', function(){
   toggleButton();
});

Answer 1

You can use var awardShow = awardOptions.toggleClass('hidden'); instead of using addClass or removeClass .

  $('#toggler').on('click', function(){ $('#awardOptions, #yearOptions').toggleClass('hidden'); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggleWrapper"> <input type="checkbox" class="dn" name="toggler" id="toggler" checked/> <label for="toggler" class="toggle"> <span class="toggle__handler"></span> </label> </div> <div class="inputBox" id="filter"> <div class="dropdown hidden" id="yearOptions"> <select id="hof-year"> <option value="0">Choose a Year</option> <option value="2016">2016</option> </select> </div> <div class="dropdown" id="awardOptions"> <select id="hof-accomp"> <option value="0">Choose an Award</option> </select> </div> </div>