Bootstrap jQuery, how to show hidden DIVs when child form fields are filled, and clear them when DIV is hidden?

Quite simply, I want to create a form that has a hidden "advanced" search options section. those. I don't want to burden the user with extra fluff if they don't need it, so I want to be able to:

• create a hidden div to hold all extra fields (this works)
• show / hide this field on button click (this works)
• clear margins in hidden div if full AND IF div is hidden again (not implemented)
• automatically renders the div if any of the form fields in the div are filled, i.e. on the refresh or submit page of the form. [when the search is submitted, the fields are filled with the last search, so the user can search again if one of the extra fields is filled, I need the div to be visible so they know what they are looking for]
• it can be reused without specifying separate field names ~ there are three almost identical forms on the same page.

Here's part of the form:

<div class="row" style="display:none;" id="stainless-extra-options">

    <div class="form-group col-sm-3">
        <label for="maxlen">Max Length</label>
        <input name="maxlen" type="text" id="maxlen"  value="[[!+formdata.maxlen]]" class="form-control input-sm" />
    </div>

    <div class="form-group col-sm-3">
        <label for="maxwid">Max Width</label>
        <input name="maxwid" type="text" id="maxwid" value="[[!+formdata.maxwid]]" class="form-control input-sm" />
    </div>

    <div class="form-group col-sm-3">
        <label for="minlen">Min Length</label>
        <input name="minlen" type="text" id="minlen"  value="[[!+formdata.minlen]]" class="form-control input-sm" />
    </div>

    <div class="form-group col-sm-3">
        <label for="minwid">Min Width</label>
        <input name="minwid" type="text" id="minwid" value="[[!+formdata.minwid]]" class="form-control input-sm" />
    </div>

</div>



<div class="row">
    <div class="form-group col-sm-4">
        <button type="submit" name="search" id="search" value="search" class="btn btn-sm btn-primary btn-block">Search Stainless</button>
    </div>
    <div class="form-group col-sm-4">
        <button type="button" name="reset" id="reset" value="reset" class="btn btn-sm btn-primary btn-block reset">New Search</button>
    </div>
    <div class="form-group col-sm-4">
        <button type="button" name="expand-stainless" id="expand-stainless" value="expand-stainless" class="btn btn-sm btn-primary btn-block toggle-extra-options" 
        data-target="#stainless-extra-options">More Options</button>
    </div>
</div>

      

        
        
        
      

    

And jQuery:

$( ".toggle-extra-options" ).click(function() {

  var target_selector = $(this).attr('data-target');
  var $target = $(target_selector);

  console.log('clicked ' + target_selector);

  if ($target.is(':hidden')){console.log('target hidden');
    $target.show( "slow" );
    $(this).html('Less Options');
  }else{console.log('target visible');
    $target.hide( "slow" );
    $(this).html('More Options');
  }

  console.log($target.is(':visible'));    

});

      

        
        
        
      

    

Here is the boot bit the bit that works so far: BOOTPLY

I would also like to somehow get rid of the slide-to-left animation ... not sure why this is!