title: make the first tabs shown active by default with jquery?
body: <p>I am using the following code to display the first tab by default:</p>
  
  <pre><code> // SELECT OUR FIRST TAB BY DEFAULT
   $('.tabs-nav LI:first').addClass('active');
   $('.tabContent').hide();
   $('.tabContent:first').show();
  
   // FORWARD TAB LI CLICKS TO TAB A CLICKS
   $('.tabs-nav LI').click(function(e){
      e.preventDefault();
      $(this).find('A').click();
      return false;
   });
  
   // INTERCEPT TAB A CLICKS TO SET THE ACTIVE TAB AND SHOW TAB PANEL.
   $('.tabs-nav LI A').click(function(e){
      e.preventDefault();
      $('.tabs-nav LI').removeClass('active');
      $('.tabContent').hide();
      $(this).parent().addClass('active');
      var sID = $(this).attr('href');
      sID = sID.split('#').join('');
      $('#' + sID).fadeIn(400, function() {
          $(window).trigger('resize');
      });
      return false;
   });
  </code></pre>
  
  <p>});</p>
  
  <p>and here is my code for the display the tabs:</p>
  
  <pre><code>        &lt;?php  
          $aerialSlider = do_shortcode('[property_attribute attribute=aerial_slider]');
          $propertySlider = do_shortcode('[property_attribute attribute=property_slider]');
          $lodgecabinSlider = do_shortcode('[property_attribute attribute=lodgecabin]');
          $wildlifeSlider = do_shortcode('[property_attribute attribute=wildlife_slider]');
          $videosSlider = do_shortcode('[property_attribute attribute=videos_slider]');
      ?&gt;
  
      &lt;div class="tabs"&gt;
          &lt;h1&gt;PHOTO GALLERY&lt;/h1&gt;
          &lt;ul class="tabs-nav"&gt;
              &lt;?php if(empty($aerialSlider)) { 
                  } else { 
                      echo '&lt;li&gt;&lt;a href="#tab1" &gt;AERIALS&lt;/a&gt;&lt;/li&gt;';
                  } 
              ?&gt;
              &lt;?php if(empty($propertySlider)) { 
                  } else { 
                      echo '&lt;li&gt;&lt;a href="#tab3" &gt;PROPERTY&lt;/a&gt;&lt;/li&gt;';
                  } 
              ?&gt;
              &lt;?php if(empty($lodgecabinSlider)) { 
                  } else { 
                      echo '&lt;li&gt;&lt;a href="#tab2" &gt;LODGE/CABIN&lt;/a&gt;&lt;/li&gt;';
                  } 
              ?&gt;
              &lt;?php if(empty($wildlifeSlider)) { 
                  } else { 
                      echo '&lt;li&gt;&lt;a href="#tab4" &gt;WILDLIFE&lt;/a&gt;&lt;/li&gt;';
                  } 
              ?&gt;
              &lt;?php if(empty($videosSlider)) { 
                  } else { 
                      echo '&lt;li&gt;&lt;a href="#tab5" &gt;VIDEOS&lt;/a&gt;&lt;/li&gt;';
                  } 
              ?&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>If done this so a user could insert shortcodes to be displayed in the tabs which all the shortcode does is display a gallery. I then created it where if there is nothing put in the meta box of that field, a tab does not show up. No point in showing the tab if there is nothing there. The issue is that when there is nothing inserted in the first tab meta field, the gallery space is collapsed. If I click a tab, it shows up.</p>
  
  <p>The issue seems to be that the jquery is targeting the first tab but I need the first visible tab to be the default tab. I hope I was clear in my issue. Can anyone help me? I'm a noob when it comes to jquery so any help is appreciated.</p>
  
  <p>Thanks in advance!</p>