Back button after a slide

Question

i need to have a back button on my slide to return to the previous div. I did several test but without success.

there is my JS

function SlideOut(element) {

$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);

}
$("#content div").click(function () {
var move = $(this).attr('data-move');
SlideOut(move);
});

There is the demo link: http://jsfiddle.net/VA5Pv/

thanks

Answer 1

You could create a history. I edited the fiddle with some dirty code but the idea is there:

var history = [];
var last;

$("#content div").click(function () {
    var move = $(this).attr('data-move');
    if (last) history.push(last);
    last = move;
    SlideOut(move);
});

$("#back").click(function () {
    SlideOut(history.pop());
    return false;
});

http://jsfiddle.net/VA5Pv/1/

Basically: store the "move" variable in a history array. When you want to go back, pop the last value out of the history array.

Answer 2

try the following:

$('.anim button').click(function(){$(this).parent().removeClass('opened');});

I assigned this to the button in div rouge. But the target could be anything in that div you want the user to click on ...

see here: JSfiddle

Answer 3

Reset

If you just want to return to the initial state (no slides opened), just add the following:

$('button.close').click(function() {
    $('.opened').removeClass('opened');
});

Tracking a full history is overkill in this case.

Demo: http://jsfiddle.net/VA5Pv/4/

History

Several answers suggested using a history. Most of them used an array which keeps track of the slides the user opened and then simply pop from that to "go back".

var history = [];

$('#content div').click(function() {
    var move = $(this).attr('data-move');
    history.push(move);
    SlideOut();
});

$('button.close').click(function() {
    history.pop();
    SlideOut();
});

function SlideOut() {
    var element = history[history.length - 1];
    // ... same as before ...
}

This would be necessary if you wanted to allow the user to open any number of slides in any order and always present them with a button to go back to the previously opened slide.

Sequence

Another solution could have been to store all the slide IDs in an array and keep a counter that tells you at which slide you are. Going back would mean decrementing the counter if it is not already at zero and then switching to that particular slide.

This would be useful if you were trying to create something like a presentation where each slide is opened in sequence and the transitions are entirely linear.

---

This is why I asked you to clarify what you were trying to build. Depending on the use case, the solutions could have been vastly different and far more complex than what you were actually looking for.

Thanks for accepting my answer and welcome to StackOverflow. Feel free to upvote any answers you found helpful even if they did not answer your question sufficiently.

Answer 4

Here is the DEMO

<div id="fullContainer">
    <div id="right" class="anim"></div>
    <div id="rouge" class="anim">Hello world!
        <button class="close">Close</button>
    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            <div data-move="right">Open Right</div>
            <div data-move="rouge">Open Rouge</div>
            <div id="back">Back</div>
        </div>

function SlideOut(element) {
    if(element == undefined) {
        $('#back').hide();
    }
    $(".opened").removeClass("opened");
    $("#" + element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function () {
    var move = $(this).attr('data-move');
    $('#back').show();
    SlideOut(move);
});