HTML form show/hide options using JavaScript

Question

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!

Answer 1

To have a more reusable / generic approach, I suggest adding a data-attribute and use that as main selector. Else you have to change the id on different pages / cases all the time.

$(document).ready(function(){
    //REM: Instead of an id, hide every element having the attribute data-hide
    //$('#advancedOptions').hide();
    $('div[data-hide]').hide();
  
    //REM: Change textContent to "+";
    this.textContent = '+';

    $('.u-btn-2').click(function() {
        //REM: Same here, instead of id, check for the attribute
        //if($('#advancedOptions').is(':hidden')){
        //  $('#advancedOptions').slideDown();
        //}
        //else{
        //  $('#advancedOptions').slideUp();
        //}
    
        if($('div[data-hide]').is(':hidden')){
            $('div[data-hide]').slideDown();
            this.textContent = '-'
        }
        else{
            $('div[data-hide]').slideUp();
            this.textContent = '+'
        }
    })
});

a{text-decoration: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div>
        <label for="text-c578">Template Frequency (seconds)</label>
        <input type="text" placeholder="Template Frequency" id="text-c578">
    </div>

    <div id='test' data-hide="true">
        <label for="text-16e6">Source IP Address</label>
        <input type="text" placeholder="Source IP Address" id="text-16e6">
    </div>

    <div id='advancedOptions' data-hide="true">
        <label for="text-c9f3">Destination IP Address</label>
        <input type="text" placeholder="Destination IP Address" id="text-c9f3">
    </div>

    <div>
        <input type="submit" value="submit">
        <a href="#">Submit</a>
    </div>
</div>
<a href="#" class="u-btn-2">+</a>

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.

Answer 2

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()