title: Bootstrap jQuery, how to show hidden DIV when child form fields are populated AND clear them when DIV is hidden?
body: <p>Pretty straightforward, I want to create a form that has a hidden section of "extra" search options. i.e. I don't want to burden the user with the extra fluff if they don't need it so I want to be able to:</p>
  
  <ul>
  <li>create a hidden div to hold all the extra fields (this works)</li>
  <li>show/hide that field on a button click (this works)</li>
  <li>clear the fields in the hidden div IF they are populated AND IF the div is hidden again (not implemented)</li>
  <li>automatically have the div visible if any of the form fields in the div are populated, i.e. on a page refresh or form submission. [ when the search is submitted, the fields get repopulated with the last search so the user can search again, if one of the extra fields is populated, I need the div to be visible so they know what they are searching] </li>
  <li>have it be re-usable without specifying individual field names ~ there are 3 nearly identical forms on the same page</li>
  </ul>
  
  <p>Here is part of the form:</p>
  
  <pre><code>&lt;div class="row" style="display:none;" id="stainless-extra-options"&gt;
  
      &lt;div class="form-group col-sm-3"&gt;
          &lt;label for="maxlen"&gt;Max Length&lt;/label&gt;
          &lt;input name="maxlen" type="text" id="maxlen"  value="[[!+formdata.maxlen]]" class="form-control input-sm" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-sm-3"&gt;
          &lt;label for="maxwid"&gt;Max Width&lt;/label&gt;
          &lt;input name="maxwid" type="text" id="maxwid" value="[[!+formdata.maxwid]]" class="form-control input-sm" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-sm-3"&gt;
          &lt;label for="minlen"&gt;Min Length&lt;/label&gt;
          &lt;input name="minlen" type="text" id="minlen"  value="[[!+formdata.minlen]]" class="form-control input-sm" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-sm-3"&gt;
          &lt;label for="minwid"&gt;Min Width&lt;/label&gt;
          &lt;input name="minwid" type="text" id="minwid" value="[[!+formdata.minwid]]" class="form-control input-sm" /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div class="row"&gt;
      &lt;div class="form-group col-sm-4"&gt;
          &lt;button type="submit" name="search" id="search" value="search" class="btn btn-sm btn-primary btn-block"&gt;Search Stainless&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="form-group col-sm-4"&gt;
          &lt;button type="button" name="reset" id="reset" value="reset" class="btn btn-sm btn-primary btn-block reset"&gt;New Search&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="form-group col-sm-4"&gt;
          &lt;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"&gt;More Options&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the jQuery:</p>
  
  <pre><code>$( ".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'));    
  
  });
  </code></pre>
  
  <p>Here is a bootply of the bits that work so far: <a href="http://www.bootply.com/b7uJwpLdC9" rel="nofollow">BOOTPLY</a></p>
  
  <p>I'd also like to get rid of the "slide in from the left" animation somehow... don't know why it's doing that!</p>