title: jQuery: very simple tab switching
body: <p>I'm trying to create a very simple tab switching mechanism using jQuery (it's for a WordPress plugin where all tabs show fields that must belong to the same form.)</p>
  
  <p>My goal is:
  1) the clicked tab gets highlighted as active;
  2) the content referred to the clicked tab gets visible taking the place of the previously displayed content;
  3) only the currently active content must be visible and only its tab must be highlighted.</p>
  
  <p>My HTML code is something like this:</p>
  
  <pre><code>    &lt;html&gt;
        &lt;body&gt;
        &lt;h2 class="nav-tab-wrapper"&gt;
          &lt;a href="#tab-1" class="nav-tab nav-tab-active"&gt;First&lt;/a&gt;
          &lt;a href="#tab-2" class="nav-tab"&gt;Second&lt;/a&gt;
          &lt;a href="#tab-3" class="nav-tab"&gt;Third&lt;/a&gt;
        &lt;/h2&gt;
        &lt;hr /&gt;
        &lt;section id="tab-1" class="tab-content active"&gt;
          &lt;P&gt;Some content here.&lt;/P&gt;
        &lt;/section&gt;
        &lt;section id="tab-2" class="tab-content hidden"&gt;
          &lt;p&gt;Some more here.&lt;/p&gt;
        &lt;/section&gt;
        &lt;section id="tab-3" class="tab-content hidden"&gt;
          &lt;p&gt;Something else here.&lt;/p&gt;
        &lt;/section&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>and my <strong>broken</strong> jQuery code is:</p>
  
  <pre><code>(function( $ ) {
      $('h2.nav-tab-wrapper &gt; a').click(function(event) {
      // Clicked anchor: prevent browser from taking action.
      event.preventDefault();
  
      // jQuery selector to display tab content.
      var active_tab_selector = $('h2.nav-tab-wrapper &gt; a').attr('href');
  
      // Find the activated navigation and remove '.active'.
      var activated_nav = $('h2.nav-tab-wrapper &gt; a.nav-tab-active');
      activated_nav.removeClass('nav-tab-active');
  
      // Add '.active' to the clicked navigation.
      $(this).parents('a').addClass('nav-tab-active');
  
      // Hide the displayed tab content.
      $(active_tab_selector).removeClass('active');
      $(active_tab_selector).addClass('hidden');
  
      // Show target tab content.
      var target_tab_selector = $(this).attr('href');
      $(target_tab_selector).removeClass('hidden');
      $(target_tab_selector).addClass('active');
    });
  })( jQuery );
  </code></pre>
  
  <p>It doesn't work as expected. You can try it on <a href="https://jsfiddle.net/Alessandro_Maselli/5ftr8jpw/30/" rel="nofollow noreferrer">JSFiddle</a> (with some minimum CSS omitted here.)</p>
  
  <p>I'm new to jQuery. What am I missing or doing wrong?</p>
  
  <p>Thank you in advance.</p>