skip to Main Content

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


  1. 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()
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search