title: Change Content of Target Div on Slide Change
body: <p>JQuery ubernoob here. I'm trying to get the text of an active slide into a target div to achieve something similar to this.</p>
  
  <p><a href="http://www.davidchipperfield.co.uk/project/valentino_new_york" rel="nofollow">http://www.davidchipperfield.co.uk/project/valentino_new_york</a></p>
  
  <p>I'm using Alvaro Trigo's <a href="https://github.com/alvarotrigo/fullPage.js" rel="nofollow">fullPage.js</a> multi page slider and would like to be able to update the caption in a separate div with each slide change. I've successfully used .appendTo by finding the active class to grab a current div and display its contents in the target div but it only works once. I feel like I'm close but could really use a little help here. Do I need to use .empty() after each slide leave? It looks like the slider already assigns an active class to the current slide which may or may not make my life easier. Or am I way off and is there a better way to do this?</p>
  
  <p>This is what I've got so far: </p>
  
  <pre><code>$(document).ready(function() {
  $('#fullpage').fullpage({ slidesNavigation: true, css3:true,   slidesNavigation: false,
      afterSlideLoad: function(anchorLink, index, slideAnchor,   slideIndex){
                  $('.slide.active p').each(function(){
                  $(this).appendTo('#current-caption');
                  });
  
              }});
  });
  
  &lt;div id="fullpage"&gt;
    &lt;div class="section"&gt;
      &lt;div class="row"&gt;
         &lt;div class="slow-fade" data-stellar-ratio=".7"&gt;
            &lt;div class="small-centered medium-centered large-centered     large-12 columns"&gt;
                    &lt;h1&gt;Portfolio&lt;/h1&gt;
                    &lt;h2&gt;A selection of recent works.&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- section --&gt;
  &lt;div class="section"&gt;Some section
    &lt;div class="slide"&gt;&lt;div class="caption active"&gt;&lt;p&gt;First Caption&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;div class="caption"&gt;&lt;p&gt;Second Caption&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;div class="caption"&gt;&lt;p&gt;Third Caption&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;div class="caption"&gt;&lt;p&gt;and the 4th&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt; &lt;!-- section --&gt;
  &lt;div class="section"&gt;Some section&lt;/div&gt; &lt;!-- section --&gt;
  &lt;div class="section"&gt;Some section&lt;/div&gt; &lt;!-- section --&gt;
  &lt;/div&gt;
  
  &lt;footer class="portfolio-footer"&gt;
  &lt;div class="footer-nav"&gt;
      &lt;div class="row"&gt;
              &lt;div class="large-3 columns"&gt;
                      &lt;div id="current-caption"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!--large-3--&gt;
              &lt;div class="large-6 columns"&gt;
                      &lt;p&gt; 1/5 &lt;/p&gt;
              &lt;/div&gt;&lt;!--large-6--&gt;
              &lt;div class="large-3 columns"&gt;
                      &lt;p&gt; Read More &lt;/p&gt;
              &lt;/div&gt;&lt;!--large-6--&gt;
      &lt;/div&gt;&lt;!--row--&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- footer-nav --&gt;
  &lt;/footer&gt;&lt;!-- portfolio-nav --&gt;
  </code></pre>