1

I would like to be able to click anywhere on the screen to return everything to its original state instead of having to re-click the button. Would appreciate any help. Thanks!

JQUERY CODE

    $(".readNowbutton").click(readNow);

    function readNow() {
        $(".bookBox-1, .bookBox-2, .bookBox-3, .bookBox-4, .bookBox-5").animate({
            top: "800",
        });
        $(".selectStoryBox").animate({
            right: "2800",
        });
        $(".bookDescription-1").delay(1000).animate({
            top: "120",
        });
        $("hr").slideToggle();
        $("hr").unbind("click");
        $(".readNowbutton").unbind("click");
        $(".readNowbutton").click(readNowReverse);
    }

    //REVERSES FULL STORY


    function readNowReverse() {
        $(".bookBox-1, .bookBox-2, .bookBox-3, .bookBox-4, .bookBox-5").animate({
            top: "0",
        });
        $(".bookDescription-1").animate({
            top: "0",
        });
        $(".selectStoryBox").animate({
            right: "2800",
        });
        $("hr").slideToggle();

    }

});
Delroy Brown
  • 125
  • 1
  • 7
  • 2
    Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) – Robert Andrei Feb 28 '20 at 10:23

2 Answers2

0

Here's the top solution from a similar question 

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}
Robert Andrei
  • 297
  • 3
  • 15
0

Click anywhere to run function readNowReverse():

$(window).click(function() {
  readNowReverse()
});
Leszek Mazur
  • 2,443
  • 1
  • 14
  • 28