title: Creating HTML form with Bootstrap togglable tabs, content not showing
body: <p>I'm creating a form that has different fields when different tabs are opened up. I'm trying to use Bootstrap's togglable tabs, and it looks like it's working, but when you click on another tab, it doesn't show the other html that is supposed to show up in that particular div.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;form name="quote" id="price-quote"&gt;
    &lt;div class="container"&gt;
      &lt;div id="service-tabs" class="container"&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li class="active"&gt;&lt;a href="#carpet-cleaning" data-toggle="tab"&gt;Carpet Cleaning&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#upholstery-cleaning" data-toggle="tab"&gt;Upholstery Cleaning&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
            &lt;div class="tab-content clearfix"&gt;
              &lt;div class="tab-pane active" id="1"&gt;
                  &lt;h3&gt;Carpet Cleaning Options&lt;/h3&gt;
                      &lt;!--how many bedrooms--&gt;
                      &lt;label class="control-label" for="carpet_cleaning"&gt;Bedrooms&lt;/label&gt;&lt;br&gt;
                          &lt;select class="form-control-1" id="carpet_cleaning"&gt;
                              &lt;option value="0"&gt;0&lt;/option&gt;
                              &lt;option value="1"&gt;1&lt;/option&gt;
                              &lt;option value="2"&gt;2&lt;/option&gt;
                          &lt;/select&gt;
               &lt;/div&gt;
  
             &lt;div class="tab-pane" id="2"&gt;
                  &lt;h3&gt;Upholstery Cleaning Options&lt;/h3&gt;
                      &lt;!--how many dining room chairs--&gt;
                      &lt;label class="control-label" for="dining_chairs_cleaning"&gt;Dining Room Chairs (each)&lt;/label&gt;&lt;br&gt;
                          &lt;select class="form-control-1" id="dining_chairs_cleaning"&gt;
                              &lt;option value="0"&gt;0&lt;/option&gt;
                              &lt;option value="1"&gt;1&lt;/option&gt;
                              &lt;option value="2"&gt;2&lt;/option&gt;
                          &lt;/select&gt;
             &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here's a JS fiddle for a simpler view: <a href="https://jsfiddle.net/z2kt4hv0/" rel="nofollow noreferrer">https://jsfiddle.net/z2kt4hv0/</a></p>
  
  <p>I've tried this using jQuery as well, but I thought it would be better with Bootstrap since I was already using it for other parts of the page. Everything seems like it should work, but the other tab won't show the right content. Any help would be great, thank you.</p>