title: Getting a resize event to happen every time a jQuery UI tab click occurs
body: <p>I'm using jQUery UI tabs, and within each tab, it's got a slick.js-based slider.</p>
  
  <p>Since the second slider is initially set to <code>display:none;</code> on page load (since it's in a non-active tab), its size isn't calculated correctly. </p>
  
  <p>If once the second tab is active, the window is resized, it calculates the slick slider's sizing correctly.</p>
  
  <p>Here's the HTML markup (slightly simplified for example purposes)</p>
  
  <pre><code>&lt;div class="sampleRoadmapsTabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#year1"&gt;Year&lt;br /&gt;&lt;span class="num"&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#year2"&gt;Year&lt;br /&gt;&lt;span class="num"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="year1"&gt;
          &lt;div class="slider sliderContent"&gt;
              &lt;div&gt;
                  Year 1, Slide 1 Content
              &lt;/div&gt;
  
              &lt;div&gt;
                  Year 1, Slide 2 Content
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /sliderContent --&gt;
      &lt;/div&gt;
      &lt;!-- /year1 --&gt;
  
      &lt;div id="year2"&gt;
          &lt;div class="slider sliderContent"&gt;
              &lt;div&gt;
                  Year 2, Slide 1 Content
              &lt;/div&gt;
  
              &lt;div&gt;
                  Year 2, Slide 2 Content
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /sliderContent --&gt;
      &lt;/div&gt;
      &lt;!-- /year2 --&gt;
  &lt;/div&gt;
  &lt;!-- /sampleRoadmapsTabs --&gt;
  </code></pre>
  
  <p>I've searched and found others using the window resize on tabsactivate, so setup the JS like this:</p>
  
  <pre><code>//Fires jQuery UI tabs instance(s)
      $(function() {
          $(".tabs").tabs();
          $(".sampleRoadmapsTabs").on( "tabsactivate", function( event, ui ) 
          {
              $(window).triggerHandler("resize");
          } );
          $(".tabs").fadeIn(500);
      });
  </code></pre>
  
  <p>While this fixes going from tab 1 to tab 2 (#year1 to #year2 in the above example), going back to the first tab, the resize doesn't automatically get fired again, so the tab one is broken after clicking from #year2 and then back to #year1 tab.</p>
  
  <p>How do I get the window triggerHandler resize event to happen on every successive tab click, rather than the initial? Is it due to the fact I'm not classing/id'ing the individual slick sliders uniquely?</p>