title: How would I reset a .click toggle function?
body: <p>I'm making a infographic slider and I have buttons when clicked that reveal text. When I go to the next slider and then hit the previous button and go back my toggles reveal the text and then bounce back to be invisible.</p>
  <p>Here is some of the code... I'm not sure if I should be resetting the css or Javascript div where each button is held? Please tell me how I can fix the toggle issue.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( "#point1" ).click(function() {
          $( "#timeline1" ).toggle( "slow", function() {
            // Animation complete.
          });
        });
  
        $( "#point2" ).click(function() {
          $( "#timeline2" ).toggle( "slow", function() {
            // Animation complete.
          });
        });
  
        $( "#point3" ).click(function() {
          $( "#timeline3" ).toggle( "slow", function() {
            // Animation complete.
          });
        });
      
        $( "#point4" ).click(function() {
          $( "#timeline4" ).toggle( "slow", function() {
            // Animation complete.
          });
        });
  
        $( "#point5" ).click(function() {
          $( "#timeline5" ).toggle( "slow", function() {
            // Animation complete.
          });
  
        });
        
        / next and previous navigation functions
  function showNextScreen() {
      
      // check if nav is active
      if (navActive) {
          
          // disable nav
          navActive = false;
          
          // targets the current screen
          currentScreen = "#screen" + screenNum;
  
          // sets next screen number
          screenNum++;
  
          // show/hide nav
          showHideNav(screenNum);
  
          // targets the next screen
          nextScreen = "#screen" + screenNum;
  
          // transitions current screen out
          gsap.fromTo(currentScreen, {
              x: 0
          }, {
              duration: duration,
              delay: 0.5,
              x: -960,
              ease: "power2.inOut"
          });
  
          // shows next screen
          $(nextScreen).show();
  
          // transitions next screen in
          gsap.fromTo(nextScreen, {
              x: 960
          }, {
              duration: duration,
              delay: 0.5,
              x: 0,
              ease: "power2.inOut",
              onComplete: function() {
  
                  // hide current screen
                  $(currentScreen).hide();
                  
                  // enable nav
                  navActive = true;
              }
          });
  
          // load function to animate on contents of screen
          window["loadScreen" + screenNum]();
  
          // stop voiceover from playing
          $("#voiceover").trigger("pause");
  
      
          
      }
  }
  
  function showPrevScreen() {
      
      // check if nav is active
      if (navActive) {
          
          // disable nav
          navActive = false;
          
          // targets the current screen
          currentScreen = "#screen" + screenNum;
  
          // sets next screen number
          screenNum--;
  
          // show/hide nav
          showHideNav(screenNum);
  
          // targets the next screen
          prevScreen = "#screen" + screenNum;
  
          // transitions current screen out
          gsap.fromTo(currentScreen, {
              x: 0
          }, {
              duration: duration,
              delay: 0.5,
              x: 960,
              ease: "power4.inOut"
          });
  
          // shows previous screen
          $(prevScreen).show();
  
          // transitions next screen in
          gsap.fromTo(prevScreen, {
              x: -960
          }, {
              duration: duration,
              delay: 0.5,
              x: 0,
              ease: "power2.inOut",
              onComplete: function() {
  
                  // hide current screen
                  $(currentScreen).hide();
  
                  // enable nav
                  navActive = true;
              }
          });
  
          // load function to animate on contents of screen
          window["loadScreen" + screenNum]();
  
          
          
           // stop voiceover from playing
           $("#voiceover").trigger("pause");
          
      }
  }
  
  // next and previous button clicks
  $("#next").click(showNextScreen);
  $("#prev").click(showPrevScreen);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#point1 {
      position: absolute;
      top: 20%;
      left: 8%;
      transform: translate(-50%, -50%);
      width: 45px;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="img/SVG/point1.svg" alt="fact" id="point1" class="point"/&gt;
             &lt;img src="img/SVG/point2.svg" alt="fact" id="point2" class="point"/&gt;
             &lt;img src="img/SVG/point3.svg" alt="fact" id="point3"class="point" /&gt;
             &lt;img src="img/SVG/point4.svg" alt="fact" id="point4"class="point" /&gt;
             &lt;img src="img/SVG/point5.svg" alt="fact" id="point5" class="point"/&gt;
             
                &lt;div id="prev"&gt;BACK&lt;/div&gt;
          &lt;div id="next"&gt;NEXT&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>