Back button after slide

Question

I need to have a back button on my slide in order to return to the previous div. I did some tests, but to no avail.

have 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 a demo link: http://jsfiddle.net/VA5Pv/

thanks

Answer 1

Reset

If you want to return to its original state (without slides), simply add the following:

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

Tracking the full story in this case is redundant.

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

Story

A few answers suggested using the story. Most of them used an array that tracks the slides that the user opened, and then simply pops them out to “return”.

 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 would like to allow the user to open any number of slides in any order and always provide them with a button to return to the previously opened slide.

Sequence

Another solution could be to store all slide IDs in an array and save a counter that tells you which slide you are on. A return would mean decrementing the counter if it is no longer zero, and then switches to this particular slide.

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

---

That is why I asked you to clarify what you were trying to build. Depending on the use case, the solutions could be significantly different and much more complex than what you were really looking for.

Thanks for accepting my response and welcome StackOverflow. Feel free to support all the answers you found useful, even if they did not answer your question enough.

Answer 2

You can create a story. I edited the fiddle with some kind of 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: save the variable "move" in the history array. When you want to go back, print the last value from the history array.

Answer 3

try the following:

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

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

see here: jsfiddle

Answer 4

Here is a 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); });