Slide in div on page load and then click to slide in and out (jQuery)

Question

I'm a jQuery/Javascript newbie and I'm struggling with the final piece of a click-to-toggle animation.

I'd like a div to slide in automatically on page load, and then afterward be able to click a button that slides it on and off the screen. I've managed to get it sliding in on page load and for the first button click to slide it back off the screen, but struggling to find out how to toggle the click back and forth. The second click should match how it looks when it automatically slides in on the page load.

Some of the variations I've tried slide the button/tab completely out of view or just don't work.

Here is my fiddle with the code.

Thanks in advance.

HTML:

 <div class="slide-out">
      <div class="slide-out-tab">
        <div>
          <p>QUIZ NIGHT</p>
        </div>
      </div>
      <div class="slide-out-content">
        <div class="slide-title"> 
          <h3>QUIZ NIGHT<br>£100 prize pot <br>Tuesdays <br>7pm - 9pm</h3>
          <a href="#">Book Now</a>
        </div>
      </div>
    </div>

jQuery (some variations I've tried commented out):

    $(window).on("load", function() {
       $(".slide-out").animate({ "right": "0px" }, "slow" );
       $(".slide-out-tab").click(
    function () { 
      $(".slide-out").animate({ "right": "-=300px" }, "slow" );
    }); 
    });


// $(window).on("load", function() {
//    $(".slide-out").animate({ "right": "0px" }, "slow" );
//    $(".slide-out-tab").click(
//     function(){
//   $(".slide-out").animate({ "right": "-=300px" }, "slow" );
// },
// function () { 
// $(".slide-out").animate({"right": "0px" }, "slow");
// });
// });

 

//     const $slideOut = $('.slide-out')
// $slideOut.find('.slide-out-tab').on('click', () => {
//   $slideOut.toggleClass('is-active')
// })


// $(document).ready(function() {
//   $(".slide-out-tab").click(function(){
//     $(".slide-out").toggleClass("is-active");
// });
// });

CSS:

.slide-out {
  background-color: #000;
  color:#fff;
  position: fixed;
  width: 300px;
  top: 90%;
  transform: translateY(-90%);
  right: -300px;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.slide-out-tab {
  background-color: #E84E1C;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  height: 100%;
  left: -40px;
  position: absolute;
  width: 40px;
}

.slide-out-tab div {
  text-align: center;
  position: relative;
  right: 75px;
  top: 90px;
  color: #fff;
  padding: 1px 5px;
  width: 180px;
  transform: rotate(270deg);
  writing-mode: lr-tb;
}

.slide-out-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* .slide-out.is-active {
  right: -300px;
} */

Answer 1

You have to save the current state of your slider and act accordingly in your function in the onclick event.

Here is your edited fiddle

The specific change I have made in javascript

$(window).on("load", function() {
   $(".slide-out").animate({ "right": "0px" }, "slow" );
   let slideOutVisible = true;
   
   $(".slide-out-tab").click(() => { 
    if (slideOutVisible) {
        $(".slide-out").animate({ "right": "-=300px" }, "slow" );
    } else {
        $(".slide-out").animate({ "right": "0px" }, "slow" );
    }
    slideOutVisible = !slideOutVisible;
  }); 
});

I have defined a variable slideOutVisible which stores the state. If the user now clicks on it, the slider is extended or retracted depending on the state. Afterwards the state is negated. Means it becomes the opposite of itself. So if slideOutVisible = true it will be set to "not slideOutVisible" which is false in this case.