title: How to display content of multiple tabs in a single page?
body: <p>I have multiple tabs in a single page. <code>Tab1</code> is displaying the content properly, <code>Tab2</code> and <code>Tab3</code> are not displaying the content properly.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
      $('#tabHeader a').on('click',function () {
          // Set header
          $('.selectTabHeader').removeClass('selectTabHeader');
          $(this).addClass('selectTabHeader');
  
          // Show Actual area
          var v = this.id;
  
          $('.selectedTab').removeClass('selectedTab');
          $('.' + v).addClass('selectedTab');
      });
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="tabArea"&gt;
      &lt;div id="tabHeader"&gt;
          &lt;a class="tab selectTabHeader" id="tab1"&gt;Asia&lt;/a&gt;
          &lt;a class="tab" id="tab2"&gt;Europe&lt;/a&gt;
          &lt;a class="tab" id="tab3"&gt;Middle East&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="tabData"&gt;
          &lt;div id="tab-data" class="tab1 selectedTab"&gt;
              &lt;div id="accordion"&gt;
                  &lt;h3&gt;Places&lt;/h3&gt;
                  &lt;div class="placesx"&gt;
                      &lt;div class="placesx-data"&gt;
                          &lt;p&gt;Tab1 content will come here for places&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;h3&gt;Hotels&lt;/h3&gt;
                  &lt;div class="hotelx"&gt;
                      &lt;div class="hotelx-data" data-price='299'&gt;
                          &lt;h4&gt;Hotel&lt;/h4&gt;
                          &lt;p&gt;Tab1 content will come here for hotel&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="tab-data" class="tab2"&gt;
                          &lt;div&gt;
                              &lt;img src="../images/tab2.jpg" height="100px" width="100%"&gt;
                              &lt;h3&gt;Tab 2&lt;/h3&gt;
                              &lt;p&gt;Tab2 content will come here&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="tab-data" class="tab3"&gt;
                          &lt;div&gt;
                              &lt;img src="../images/tab3.jpg" height="100px" width="100%"&gt;
                              &lt;h3&gt;Tab 3&lt;/h3&gt;
                              &lt;p&gt;Tab3 content will come here&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;div/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>