I am attempting to toggle a class on a parent element (either a div or form). My CSS adjusts the visibility of certain form elements based on this parent class.
However, when the class is changed on the div or form, all the inputs within the form are cleared or set to no value. While this functionality works for most of the inputs, I do not want the values to be lost for those that are always visible even when hiding the form.
In essence, I have a basic search form and an advanced one.
UPDATE: Vanilla JavaScript (not jQuery) behaves as expected... so why jQuery?
var d = document.getElementById("div");
d.className = d.className + " advanced";
Here is the complete fiddle: https://jsfiddle.net/psalmody/Lsnsaups/2/
CSS:
#div .search-advanced {
display:none;
}
#div.advanced .search-advanced {
display:inline-block;
}
HTML:
<div id="div">
<form id="searchForm">
<fieldset>
<div>
<label for="term">Semester:</label>
<select id="term">
<option disabled></option>
</select>
</div>
<div>
<label for="subj">Subject(s):</label>
<input type="text" id="subj"></select>
</div>
<div class="search-advanced">
<label for="crse">Course Number:</label>
<input type="text" id="crse" maxlength="5">
</div>
<div class="search-advanced">
<label for="sec">Section:</label>
<input type="text" id="sec" maxlength="3">
</div>
<div class="search-advanced">
<label for="crn">CRN(s):</label>
<input type="text" id="crn">
</div>
<div class="search-advanced">
<label for="title">Title:</label>
<input type="text" id="title">
</div>
</fieldset>
</form>
</div>
jQuery:
$(function () {
$('#advanced').click(function () {
$('#div').toggleClass('advanced')
})
})