I am attempting to use JavaScript to show/hide specific advanced fields in a HTML form. I am using the example from Hide/show advanced option using JavaScript which looks to be working well and I am able to hide the input marked with the correct div ID. However each of my inputs use their own div (and I would like to keep it this way if possible) which causes the JS to play up.
HTML:
<div class="u-form-group u-form-partition-factor-2 u-label-top u-form-group-5">
<label for="text-c578" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-5">Template Frequency (seconds)</label>
<input type="text" placeholder="Template Frequency" id="text-c578" name="number-1" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-5">
</div>
<div id='test' class="u-form-group u-form-partition-factor-2 u-label-top u-form-group-6">
<label for="text-16e6" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-6">Source IP Address</label>
<input type="text" placeholder="Source IP Address" id="text-16e6" name="text" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-6">
</div>
<div id='advancedOptions' class="u-form-group u-form-partition-factor-2 u-label-top u-form-group-7">
<label for="text-c9f3" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-7">Destination IP Address</label>
<input type="text" placeholder="Destination IP Address" id="text-c9f3" name="text-2" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-7">
</div>
<div class="u-align-left u-form-group u-form-submit u-label-top">
<input type="submit" value="submit" class="u-form-control-hidden">
<a href="#" class="u-btn u-btn-round u-btn-submit u-button-style u-custom-color-2 u-custom-font u-heading-font u-radius-50 u-btn-1">Submit</a>
</div>
</form>
</div>
<a href="#" class="u-border-none u-btn u-btn-round u-button-style u-custom-color-2 u-custom-font u-heading-font u-hover-feature u-radius-50 u-text-body-alt-color u-btn-2">+</a>
JavaScript:
<script type='text/javascript'>
$(document).ready(function () {
$('#advancedOptions').hide();
$('.u-btn-2').click(function() {
if ($('#advancedOptions').is(':hidden')) {
$('#advancedOptions').slideDown();
} else {
$('#advancedOptions').slideUp();
}
});
});
</script>
Currently I am able to hide the input with div id='advancedOptions'
however I would like to also apply this to div id='test'
. I tried modifying the JavaScript to the below but this didn’t work (it hides id='test'
and doesn’t look to apply to div id='advancedOptions'
:
<script type='text/javascript'>
$(document).ready(function () {
$('#advancedOptions' && '#test').hide();
$('.u-btn-2').click(function() {
if ($('#advancedOptions' && '#test').is(':hidden')) {
$('#advancedOptions' && '#test').slideDown();
} else {
$('#advancedOptions' && '#test').slideUp();
}
});
});
</script>
Is there a way I can modify this JavaScript to apply to multiple div ID’s as I am planning on adding more form inputs in the future?
I am a novice with Java so any help would be great, thanks!
2
Answers
You pass a wrong param in this line
So ‘#advancedOptions’ && ‘#test’ returns ‘#test’
(See more abot logical AND operator here)
You can write this function in 2 lines
So the line above turns into
To have a more reusable / generic approach, I suggest adding a
data-attribute
and use that as main selector. Else you have to change theid
on different pages / cases all the time.If you want to add more elements to the functionality, just add a
data-hide
attribute on that and it gets considered automatically. Or remove the attribute on the element to exclude it.I chopped away the classes and names since they serve no purpose in my example and I lack the css behind it.