slideReveal script - How do you close all open “slides” before opening a new slide?

Question

Am playing around with this for a new site, and works great & easy to implement: http://nnattawat.github.io/slideReveal/

But one issue I can't determine, of you have multiple sliders, and one is already "out" from a previous event, how do you first make sure all other sliders are "closed" and THEN open the current slider?

I could do an if/then to check aach individual one, but I figure there must be a more elegant way...

Answer 1

I think the best way of solving this problem is to create a "page-level controller". What this does is acts as a container and controller of sorts for events that happen in the page.

So you essentially have to "proxy" sliding open an closed a side (and adding a dependency of closing the other slide area), since the API doesn't seem to have any hooks or events that it emits like "onSlideOpen". That's what your controller will handle.

var PageController = function(){
  var $leftSlide = $('#leftSlider').slideReveal(), // You'll want to sub in
      $rightSlide = $('#rightSlider').slideReveal(); // your selector names


  return {
    openLeft: function() {
      $leftSlide.slideReveal('show');
      $rightSlide.slideReveal('hide');
    },
    openRight: function() {
      $rightSlide.slideReveal('show');
      $leftSlide.slideReveal('hide');
    }
  };
};

var pageController = new PageController();

pageController.openLeft(); // will slide reveal left side
pageController.openRight(); // will simultaneously open right and close left

Now you can even do things like check on the state of those slides in case you have other cross-dependencies.

A lot of people would probably handle this kind of thing by emitting events and catching them, but I really don't like the pub-sub model. It tends to get very brittle very quickly.

Answer 2

Use .slideReveal("hide") on all of the sliders, then use .slideReveal("show") on the one you want revealed.

One way to do this, would be to give all the sliders a class and use that as the selector

ie

$(".slider").slideReveal("hide");
$("#sliderYouWantToShow").slideReveal("show");