Sliding panel

by IwanVosloo

HTML

<div class="slider">
    <a href="" class="prev"><span>&lt;</span></a>
    <div>
        <div><p>Stuff goes here<br>with another line</p></div>
        <div style="display: none"><p>Some more elsewhere stuff stuff stuff stuff</p></div>
        <div style="display: none"><p>Some other stuff in another</p></div>
    </div>
    <a href="" class="next"><span>&gt;</span></a>
</div>

CSS

.slider > * { 
    display: inline-block; 
    vertical-align: middle;
}
.slider > div { 
    overflow: hidden; 
    width: 80%;
    height: 100%;
    white-space: nowrap;
}
.slider > a { 
    width: auto;
}
.slider > div > div { 
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border: 5px solid grey;
    white-space: normal;
}

.slider {
    width: 15em;
    height: 5em;
}

JavaScript

/* http://www.learningjquery.com/2009/02/slide-elements-in-different-directions */
(function($){
  "use strict";
    
    $.widget('ui.myslider', {
        _create: function() {
            var _this = this;
            var e = this.element;
            $(e).find("a.next").click(function(){
                var current = $(e).find("div>div:visible");
                var next = $(current).next();
                var slideFunc = _this.slideRight;
                if (next.length == 0) {
                    next = $(e).find(">div>div").first();
                    slideFunc = _this.slideLeft;
                }
                slideFunc(current, next);
                return false;
            });
            $(e).find("a.prev").click(function(){
                var current = $(e).find("div>div:visible");
                var next = $(current).prev();
                var slideFunc = _this.slideLeft;
                if (next.length == 0) {
                    next = $(e).find(">div>div").last();
                    slideFunc = _this.slideRight;
                }
                slideFunc(current, next);
                return false;
            });
        },
        slideLeft: function(from, to) {
            to.css("margin-left", -from.outerWidth());
            to.show();
            to.animate({marginLeft: 0},
                "slow",
                function() { from.hide(); from.css('margin-left',0);}
            );         
        },
        slideRight: function(from, to) {
            to.show();
            from.animate({marginLeft: -from.outerWidth()},
                "slow",
                function() { from.hide(); from.css('margin-left',0);}
            );         
        }
    });
    
})(jQuery);
    
$(function(){
    $(".slider").myslider();
})