jQuery - show/hide based on user input

Question

I have the following div's on my page:

<div id="page1">
    Some content
</div>

<div id="page2">
    More content
</div>

<div id="page3">
    Even more content
</div>

At the bottom of the page, I have two buttons Continue and Back - what I need to do is to show and hide the divs based on the users input.

By default page1 should be shown and the others are hidden, when the users clicks Continue'page2is shown andpages 1 and 3are hidden - if the user clicks theBackbutton thenpage1` is shown and the others are hidden and so on.

I'm having a complete mental block of how to implement this in jQuery - any and all help welcomed.

Thank you to everyone who submitted, brilliant stuff.

Homer_J
– Homer_J

2013-07-23 13:58:59 +00:00
Commented Jul 23, 2013 at 13:58 — Homer_J
– Homer_J, Commented Jul 23, 2013 at 13:58

Rory McCrossan · Accepted Answer · 2013-07-23 13:53:32Z

5

You need to place those elements within a container, and then use prev and next to traverse them. Something like this:

$('.next').click(function() {
    $('.sequence-container div').hide();
    var $next = $('.sequence-container div:visible').next();
    $next.length ? $next.show() : $('.sequence-container div:first').show();
});

$('.prev').click(function() {
    $('.sequence-container div').hide();
    var $prev = $('.sequence-container div:visible').prev();
    $prev.length ? $prev.show() : $('.sequence-container div:last').show();
});

Example fiddle

UPDATE

To prevent the looping from start/end use this:

$('.next').click(function() {
    var $next = $('.sequence-container div:visible').next();    
    if ($next.length) {
        $('.sequence-container div').hide();
        $next.show();
    }
});

$('.prev').click(function() {
    var $prev = $('.sequence-container div:visible').prev();
    if ($prev.length) {
        $('.sequence-container div').hide();
        $prev.show();
    }
});

Updated fiddle

edited Jul 23, 2013 at 13:53

answered Jul 23, 2013 at 13:36

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Homer_J Over a year ago

That looks great, thank you - one final question - how would one stop at the final div in the list and not allow to go further? At the moment, it just keeps iterating through?

Okazari Over a year ago

Check out my answer if you want a code stoping at the final div (But you should specify your number of div at the beggining, i think mine can be improve to stop to the last div without giving him the number of div)

Homer_J Over a year ago

Thanks Okazari - yours does work a treat - thank you, just checking on this answer to see how easy to implement the stopping at the last div.

Rory McCrossan Over a year ago

@Okazari while your answer does work, it is heavily reliant on having the correct naming convention for the id attribute of the divs. This will make maintenance a pain, and will lead to errors. The method above is completely agnostic of attributes and means addition/removal/re-ordering is a much simpler task.

Okazari Over a year ago

Yup, i guess, just saying that mine worked ... But anyway nice update ! :) I learn some things there.

|

Miiller · Accepted Answer · 2013-07-23 13:51:05Z

2

First, you have to give all those pages a class, lets say page. Then you add a handler to the buttons:

$('.button_prev').click(function(e){
    var block   = $('.page:visible'),
        prev    = block.prev();
    if (prev.length) {
        prev.show();
        block.hide()
    }
});

$('.button_next').click(function(e){
    var block   = $('.page:visible'),
        next    = block.next();
    if (next.length) {
        next.show();
        block.hide()
    }
});

edited Jul 23, 2013 at 13:51

answered Jul 23, 2013 at 13:42

Miiller

1,0731 gold badge10 silver badges30 bronze badges

1 Comment

Okazari Over a year ago

yeah, this one looks really great and all way better than mine !

Okazari · Accepted Answer · 2013-07-23 13:43:51Z

1

Hmmm, finishing it and seing other reponse, mine feel maybe a little weird

$(document).ready(function() {

//Your first page
var curPage = 1;

//your number of pages
var nbPage = 3;

$("#page2").hide();
$("#page3").hide();
$("#next").click(function(event){
    if (curPage+1 <= nbPage) curPage += 1;
    for(var i = 1; i<=3; i++){
        if (i == curPage) $("#page"+curPage).show();
        else $("#page"+i).hide();
    }
});
$("#back").click(function(event){
    if (curPage-1 >= 1) curPage -= 1;
    for(var i = 1; i<=3; i++){
         if (i == curPage) $("#page"+curPage).show();
        else $("#page"+i).hide();
    }
});
});

Here is the HTML.

<div id="page1">
   Some content
</div>

<div id="page2">
    More content
</div>

<div id="page3">
    Even more content
</div>

<button id="back">back</button>
<button id="next">next</button>

You can check this working demo : http://jsfiddle.net/kJ45a/2/

(And to the others, feel free to feedback if this way is not a good one)

answered Jul 23, 2013 at 13:43

Okazari

4,5971 gold badge17 silver badges27 bronze badges

3 Comments

Homer_J Over a year ago

That works a treat and also works when adding further DIV's - just adjust the number of pages, hide the divs on load and increase the number in the code to whatever the number of pages. Perfect.

Okazari Over a year ago

not perfect ! Juste a way to make it work ... But looks weird finaly, Rory explained why ! Thx to him.

Homer_J Over a year ago

Appreciate you taking the time Okazari to respond. Thank you.

Tocacar · Accepted Answer · 2013-07-23 13:35:03Z

0

You could use jQuery (http://api.jquery.com/toggleClass/) to change the class of the element(s) you want to toggle and, in your css file, have those classes use the appropriate value for 'display' http://www.w3schools.com/cssref/pr_class_display.asp

answered Jul 23, 2013 at 13:35

Tocacar

4753 silver badges12 bronze badges

Comments

Karl Anderson · Accepted Answer · 2013-07-23 13:38:19Z

You are going to need to bind the click() event to the buttons at the bottom of your page. Since you did not list them in the markup, then I will I will guess they are something like this:

Markup:

<button class="back">Back</button>
<button class="continue">Continue</button>

Now you will need the actual bindings in jQuery for when the user clicks the buttons, like this:

JavaScript:

$('.continue').click(function() {
    // Logic goes here for what should happen when user clicks Continue button
});

$('.back').click(function() {
    // Logic goes here for what should happen when user clicks Back button
});

While I know you are not doing a slideshow with images, your navigation most closely resembles a slideshow, so checkout this jsFiddle

Hackerman · Accepted Answer · 2013-07-23 13:43:16Z

0

This is a basic example that i made:

JQuery Part:

$(document).ready(function() {

$("#page2").css('visibility', 'hidden');
$("#page3").css('visibility', 'hidden');

$("#continue").click(function(){
  $("#page1").css('visibility', 'hidden');
  $("#page2").css('visibility', 'visible');
});

$("#back").click(function(){

  $("#page1").css('visibility', 'visible');
  $("#page2").css('visibility', 'hidden');

});

});

HTML Part:

<div id="page1">
Some content
</div>

<div id="page2">
More content
</div>

<div id="page3">
Even more content
</div>
<input type="button" id="continue" value="continue" />
<br/>
<input type="button" id="back" value="back" />

PS: See the working fiddle here: http://jsfiddle.net/UKnrE/1/

answered Jul 23, 2013 at 13:43

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery - show/hide based on user input

6 Answers 6

6 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related