title: Flexslider not working properly when initially hidden
body: <p>initially I have my flexslider hidden, until a user clicks on a link and then it will open up. But for some reason the slider won't work after it's displayed until I adjust the browser window, which is strange! When I don't hide the flexslider it works fine. Below is my CSS, HTML, and the jquery that I use to open and close the flex slider. Anyone familiar with flex slider and would know why this is happening? Thank you!</p>
  
  <p>CSS</p>
  
  <pre><code>section#hotspots .dropdown-area {   
      width: 100%;
      float: left;
      display: none;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1&gt;Hot Spots &lt;span class="toggle-button"&gt;&lt;/span&gt;&lt;/h1&gt;
  
  &lt;section class="dropdown-area"&gt;
      &lt;div class="flex-container"&gt;
          &lt;div class="flexslider" id="secondary-slider"&gt;
              &lt;ul class="slides"&gt;
                  &lt;li&gt;&lt;img src=
                  "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-1.jpg"&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;img src=
                  "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-2.jpg"&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;img src=
                  "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-3.jpg"&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="flex-control-nav"&gt;
                  &lt;li&gt;
                      &lt;a href=""&gt;LOLA COFFEE&lt;/a&gt; /
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href=""&gt;PUBLIC MARKET CAFE&lt;/a&gt; /
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href=""&gt;MATT'S BIG BREAKFAST&lt;/a&gt; /
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--End Flexslider--&gt;
      &lt;/div&gt;&lt;!--End Flex-container--&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(window).load(function() {
  $("#hotspots .toggle-button").click(function() {
      $("#hotspots .dropdown-area").slideToggle("slow");
      $("#hotspots span").toggleClass("toggle-button close");
  });
  });
  </code></pre>