HTML form show/hide options using JavaScript

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!

>Solution :

You pass a wrong param in this line

$('#advancedOptions' && '#test').hide()

So ‘#advancedOptions’ && ‘#test’ returns ‘#test’

(See more abot logical and operator here)

You can write this function in 2 lines

$('#advancedOptions' && '#test').hide()

So the line above turns into

$('#advancedOptions').hide()
$('#test').hide()