title: How to initiate image slider after element is displayed
body: <p>I am currently having a problem where my flexslider image gallery is initializing upon pageload and breaking the functionality. This is because the flexslider is contained in a collapsed jQuery mobile tab that is set to <code>display: none</code>.</p>
  <p>The actual div that holds the collapsible content is generated in the jQuery mobile script, and cannot have a custom ID attached to it in the front end. I have inserted an additional container that is set to <code>display:none</code> so that I can initialize the slider after that element is visible.</p>
  <p>This is the code that I currently have and isn't working:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      
  $(document).ready(function(){
  
      $('#first_tab').click(function(){
      
          $('#slider_contents').css('display', 'block'){
      });
  });
          
      if ($('#slider_contents').is(':visible')) {
          
              $('.flexslider').flexslider({
                animation: &quot;slide&quot;,
               controlsContainer: &quot;.flex-container&quot;
  
              });
              
           } else {}
      });
  &lt;/script&gt;
  </code></pre>
  <p>HTML markup:</p>
  <pre><code>&lt;div data-role=&quot;collapsible&quot; id=&quot;first_tab&quot;&gt;
              &lt;h3&gt;WORK&lt;/h3&gt;
              &lt;div id=&quot;slider_contents&quot;&gt;
                  &lt;div class=&quot;flex-container&quot;&gt;
                      &lt;div class=&quot;flexslider&quot;&gt;
                      &lt;ul class=&quot;slides&quot;&gt;
                          &lt;li&gt;
                              &lt;img src=&quot;img/inacup_samoa.jpg&quot; /&gt;
                              &lt;p class=&quot;flex-caption&quot;&gt;Captions and cupcakes. Winning combination.&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;img/inacup_pumpkin.jpg&quot; /&gt;&lt;/a&gt;
                              &lt;p class=&quot;flex-caption&quot;&gt;This image is wrapped in a link!&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;img src=&quot;img/inacup_donut.jpg&quot; /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;img src=&quot;img/inacup_vanilla.jpg&quot; /&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS styles:</p>
  <pre><code>#slider_contents{
       max-width: 620px;
       margin: 0 auto;
       display: none;
       }
  
        .flexslider {width: 100%; margin: 0; padding: 0;}
        .flexslider .slides &gt; li {display: none;} /* Hide the slides before the JS is loaded.        Avoids image jumping */
         .flexslider .slides img {max-width: 100%; display: block;}
         .flex-pauseplay span {text-transform: capitalize;}
  </code></pre>
  <p>Any assistance would be greatly appreciated. I have tried so many different things and nothing seems to work.</p>