title: Setting a div to an array so i can make things disappear / re-appear based on buttons
body: <p>The title may not make the most sense.</p>
  
  <p>Basically I want to store all of the ".mainContent" into X .. </p>
  
  <p>Then when you'd click a button it would make x[0] display none, and bring in x[1].. if that makes sense... that way I could have the same wiping transition and it would just bring in my 4 different pages that I would have. </p>
  
  <p>You can see my page here: I have the "home" and "learn more" pages hard coded, but I obviously don't want to have to do this for every section</p>
  
  <p><a href="http://mikecioffi-me.stackstaging.com/" rel="nofollow noreferrer">http://mikecioffi-me.stackstaging.com/</a>   (*this is not on mobile***) only desktop. mobile version is not ready.. haha </p>
  
  <pre><code>&lt;script&gt;
      var dissapearingTime = 1800;
  var nextSlideTime = 3000;
  var originalNumber = 0;
  var newNumber = 1;
  var x = $(this).find('.mainContent');
  
  $('.button').hover(
    function () {
      $('.arrowRight').toggleClass('active');
    })
  
  $('.button').click(
    function () {
      console.log(x);
      $('.sidebar').toggleClass('anim-trans');
      setTimeout(function () {
        $(".hero").css("display", "none");
        $(".blank").css("display", "block");
      }, dissapearingTime);
  
      setTimeout(function () {
        $('.sidebar').toggleClass('anim-trans');
      }, nextSlideTime);
    })
  
  function hello() {
    $('.sidebar').toggleClass('anim-trans');
    setTimeout(function () {
      $(".blank").css("display", "none");
      $(".hero").css("display", "block");
    }, dissapearingTime);
    setTimeout(function () {
      $('.sidebar').toggleClass('anim-trans');
    }, nextSlideTime);
  }
  &lt;/script&gt;
  </code></pre>