title: JS: fullpage.js moveTo() among different section
body: <p><strong>CONTEXT:</strong></p>
  
  <p>I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements. </p>
  
  <p><strong>PROBLEM:</strong> </p>
  
  <p>The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!</p>
  
  <p><strong>My JS:</strong> </p>
  
  <pre><code>$(document).ready(function() {
  
  
    // move to quality
    $( "#q" ).click(function() {
        $.fn.fullpage.silentMoveTo('why', 1);
    });
  
    $( "#d" ).click(function() {
        $.fn.fullpage.silentMoveTo('why', 2);
    });
  
    $( "#p" ).click(function() {
        $.fn.fullpage.silentMoveTo('why', 3);
    });
  
    $( "#z" ).click(function() {
        $.fn.fullpage.silentMoveTo('why', 4);
    });
  
    $( "#e" ).click(function() {
        $.fn.fullpage.silentMoveTo('why', 5);
    });
  
  
    });
  
  
    $('#fullpage').fullpage({
        css3: true,
        sectionsColor: ['white', 'grey', '#fff', '#fff'],
        anchors:['m', 'why',],
        navigation: true,
        navigationPosition: 'right',
        // verticalCentered:false
        // 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
        // 'showActiveTooltip': true,
  
      }
  
    );
  </code></pre>
  
  <p><strong>My Html:</strong></p>
  
  <pre><code>&lt;div id="fullpage" class="fullpage-wrapper"&gt;
  
  
  
    &lt;div class="section" id="section1"&gt;
      &lt;div class="slide" id="slide1-1"&gt;
      &lt;/div&gt;   &lt;!-- End slide --&gt;
    &lt;/div&gt;
  
  
    &lt;!-- Start section 2 - why  --&gt;
  
    &lt;div class="section" id="section2"&gt;
  
      &lt;div class="slide" id="slide2-1"&gt; &lt;!-- Start Why  --&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h2 class="master-side side-default"&gt;&lt;span&gt;Why ?&lt;/span&gt;&lt;/h2&gt;
                  &lt;div class="col-md-8 col-center"&gt;
                      &lt;a id="q" class="square img-thumbnail"&gt; &lt;/a&gt;
                      &lt;a id="d" class="square"&gt; &lt;/a&gt;
                      &lt;a id="p" class="square"&gt; &lt;/a&gt;
                      &lt;a id="d" class="square"&gt; &lt;/a&gt;
                      &lt;a id="e" class="square"&gt; &lt;/a&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt; &lt;!-- End col-md-12 --&gt;
            &lt;/div&gt; &lt;!-- End Row --&gt;
  
          &lt;/div&gt;   &lt;!-- End Container --&gt;
        &lt;/div&gt; &lt;!-- End  Why  --&gt;
  
        &lt;div class="slide" id="slide2-2"&gt; &lt;!-- Start Quality --&gt;
            &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-12"&gt;
                    &lt;h2&gt;&lt;span&gt;Quality&lt;/span&gt;&lt;/h2&gt;
                    &lt;div class="col-md-8 col-center"&gt;
                        &lt;a id="q" class="square img-thumbnail"&gt; &lt;/a&gt;
                        &lt;a id="d" class="square"&gt; &lt;/a&gt;
                        &lt;a id="p" class="square"&gt; &lt;/a&gt;
                        &lt;a id="d" class="square"&gt; &lt;/a&gt;
                        &lt;a id="e" class="square"&gt; &lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt; &lt;!-- End col-md-12 --&gt;
              &lt;/div&gt; &lt;!-- End Row --&gt;
  
            &lt;/div&gt;   &lt;!-- End Container --&gt;
          &lt;/div&gt; &lt;!-- End Quality --&gt;
  </code></pre>