title: Show/hide areas of form (im using bootstrap)
body: <p>I would like to show different areas on my form dependent on what is selected.
  I can do this is JavaScript but would like to use Jquery as the effects look much better.</p>
  
  <p>I've seen lots of Jquery examples on the net but I cannot see how to implement it into my form.</p>
  
  <p>Would it be possible to show me one as an example on my form and I will be able to do the rest.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;title&gt;Basic Form&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="content-main col-md-12"&gt;
          &lt;form&gt; 
          &lt;img src="img/logo.png"&gt;
          &lt;br&gt;&lt;br&gt;
          Metsa Wood Quick Estimation tool
          &lt;br&gt;&lt;br&gt;
  &lt;div class="col-md-9"&gt; 
  
  
   &lt;fieldset class="form-group"&gt;
      &lt;label for="exampleSelect1"&gt;Type of Construction&lt;/label&gt;
      &lt;select class="form-control" id="TypeOfConstruction"&gt;
        &lt;option&gt;Traditional Masonry&lt;/option&gt;
        &lt;option&gt;Timber Frame&lt;/option&gt;
        &lt;/select&gt;
    &lt;/fieldset&gt;
  
  
  &lt;!-- Below will only show if Timber Frame is selected --&gt;
    
    &lt;fieldset class="form-group"&gt;
      &lt;label for="PartyWalls"&gt;Which walls are party walls?&lt;/label&gt;
      &lt;br&gt;&lt;input type="checkbox"&gt; W1
      &lt;br&gt;&lt;input type="checkbox"&gt; W2
      &lt;br&gt;&lt;input type="checkbox"&gt; W3
      &lt;br&gt;&lt;input type="checkbox"&gt; W4
    &lt;/fieldset&gt;
  &lt;!-- Above will only show if Timber Frame is selected --&gt;
  
  
  
    &lt;fieldset class="form-group"&gt;
      &lt;label for="FloorWidthA"&gt;Floor Width A(X)&lt;/label&gt;
      &lt;input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm"&gt;
      &lt;!--&lt;small class="text-muted"&gt;This is the text for A&lt;/small&gt;--&gt;
    
      &lt;label for="FloorWidthB"&gt;Floor Width B(X)&lt;/label&gt;
      &lt;input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm"&gt;
     &lt;!-- &lt;small class="text-muted"&gt;This is the text for A&lt;/small&gt;--&gt;
    &lt;/fieldset&gt;
    
      
    &lt;fieldset class="form-group"&gt;
      &lt;label for="FloorWidthA"&gt;Is there a stair Opening?&lt;/label&gt;
    &lt;br&gt;&lt;input type="checkbox"&gt;
    &lt;/fieldset&gt;
  
    
    &lt;!-- Below will only show if Stair Opening is checked --&gt;
     &lt;fieldset class="form-group"&gt;
      &lt;label for="FloorWidthA"&gt;Opening width C(X)&lt;/label&gt;
      &lt;input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm"&gt;
      &lt;!--&lt;small class="text-muted"&gt;This is the text for A&lt;/small&gt;--&gt;
      &lt;label for="FloorWidthA"&gt;Opening width D(X)&lt;/label&gt;
      &lt;input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm"&gt;
    &lt;/fieldset&gt;
  &lt;!-- Above will only show if Stair Opening is checked --&gt;
  
    
    
    
     &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
        &lt;div class="col-md-3"&gt;
          &lt;img src="img/drawing.jpg"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
    
    
    
    
    &lt;!--
    
    &lt;fieldset class="form-group"&gt;
      &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
      &lt;input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class="form-group"&gt;
      &lt;label for="exampleSelect1"&gt;Example select&lt;/label&gt;
      &lt;select class="form-control" id="exampleSelect1"&gt;
        &lt;option&gt;1&lt;/option&gt;
        &lt;option&gt;2&lt;/option&gt;
        &lt;option&gt;3&lt;/option&gt;
        &lt;option&gt;4&lt;/option&gt;
        &lt;option&gt;5&lt;/option&gt;
      &lt;/select&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class="form-group"&gt;
      &lt;label for="exampleSelect2"&gt;Example multiple select&lt;/label&gt;
      &lt;select multiple class="form-control" id="exampleSelect2"&gt;
        &lt;option&gt;1&lt;/option&gt;
        &lt;option&gt;2&lt;/option&gt;
        &lt;option&gt;3&lt;/option&gt;
        &lt;option&gt;4&lt;/option&gt;
        &lt;option&gt;5&lt;/option&gt;
      &lt;/select&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class="form-group"&gt;
      &lt;label for="exampleTextarea"&gt;Example textarea&lt;/label&gt;
      &lt;textarea class="form-control" id="exampleTextarea" rows="3"&gt;&lt;/textarea&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class="form-group"&gt;
      &lt;label for="exampleInputFile"&gt;File input&lt;/label&gt;
      &lt;input type="file" class="form-control-file" id="exampleInputFile"&gt;
      &lt;small class="text-muted"&gt;This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.&lt;/small&gt;
    &lt;/fieldset&gt;
    &lt;div class="radio"&gt;
      &lt;label&gt;
        &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
        Option one is this and that&amp;mdash;be sure to include why it's great
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio"&gt;
      &lt;label&gt;
        &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
        Option two can be something else and selecting it will deselect option one
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio disabled"&gt;
      &lt;label&gt;
        &lt;input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled&gt;
        Option three is disabled
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="checkbox"&gt;
      &lt;label&gt;
        &lt;input type="checkbox"&gt; Check me out
      &lt;/label&gt;
    &lt;/div&gt;
    
    
    --&gt;
   
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;​</code></pre>
  </div>
  </div>
  </p>