CODEWITHSUNDEEP
jqueryhtml
enb081
enb081

Reputation: 4051

Jquery - Show divs one by one

I need to show many divs (created dinamically) one by one as the uses clicks the previous and the next label.

What I have tried:

HTML:

<div style="display: none;" id="panel_steps_page1" class="pages page1"> </div>
<div style="display: none;" id="panel_steps_page2" class="pages page2"> </div>
<div style="display: none;" id="panel_steps_page3" class="pages page3"> </div>
<div style="display: none;" id="panel_steps_page4" class="pages page4"> </div>

<span id="btn_previous" class="previous">previous</span>
<span id="Span1" class="next">next</span>

Jquery:

$(".page1").show();

$(".next").click(function(e) {
    $(".pages").each(function(index) {

        if ($(".page" + index).is(":visible")) {
            $(".page" + index).hide();
            $(".page" + (index + 1)).show();
        }
    });

});

$(".previous").click(function(e) {
    $(".pages").each(function(index) {
        if ($(".page" + index).is(":visible")) {
            $(".page" + index).hide();
            $(".page" + (index - 1)).show();
        }
    });
});

It's not working though.

Live jsfiddle

Upvotes: 0

Views: 642

Answers (5)

Jon
Jon

Reputation: 437386

The code is over-complicated. Here's a much simpler version that almost reads aloud the same as it works:

$(".next").click(function() {
    $(".pages:visible").hide().next().show();
});

$(".previous").click(function() {
    $(".pages:visible").hide().prev().show();
});

The above is a good starting point, but it can end up hiding all of the divs if you try to step out of bounds. That problem can be fixed with a small tweak:

$(".next").click(function() {
    $(".pages:visible").hide().next(".pages").addBack().last().show();
});

$(".previous").click(function() {
    $(".pages:visible").hide().prev(".pages").addBack().first().show();
});

See it in action.

Update: Edited the code (but not the fiddle) to replace .andSelf() with .addBack(), based on insertusernamehere's comment below.

Upvotes: 5

Guern
Guern

Reputation: 1257

I used another solution, more optimized because I avoid each iteration.

$(".next").click(function(e) {
    var shown = $(".pages.visible").hide().removeClass('visible');
    var index = (shown.index() + 1) % 4;

    $(".page"+index).show().addClass('visible');
});

$(".previous").click(function(e) {
    var shown = $(".pages.visible").hide().removeClass('visible');
    var index = shown.index();
    index = (index == 0)? 3: index - 1;

    $(".page"+index).show().addClass('visible');
});

Try my solution here and let my know if it works for you

Upvotes: 2

Ram
Ram

Reputation: 144689

$(".next, .previous").click(function(e) {
    var $p = $('.pages:visible'), 
        m = this.className == 'next' ? 'next' : 'prev';
    if ($p[m]('.pages').length) $p.hide()[m]().show(); 
});

http://jsfiddle.net/xMaZQ/

Upvotes: 2

Kasyx
Kasyx

Reputation: 3200

There is your updated Fiddler.

$(".next").click(function(e) {
    var $visibleOne = $(".pages:visible");
    var $nextToBeVisible = $visibleOne.next('div.pages');

    if($nextToBeVisible.length > 0) {
        $visibleOne.hide();
        $nextToBeVisible.show();
    }

});

$(".previous").click(function(e) {
    var $visibleOne = $(".pages:visible");
    var $PrevToBeVisible = $visibleOne.prev('div.pages');

    if($PrevToBeVisible.length > 0) {
        $visibleOne.hide();
        $PrevToBeVisible.show();
    }
});

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

This snippet will keep you from hiding the last page or the first page. It prevents the scenario where no page is shown.

$(document).ready(function(){
    $(".page1").show();

    $(".next").click(function(e) {
        var next = $(".pages:visible").next(".pages");
        if(next.length >0){
           $(".pages:visible").hide();
           next.show();
        }
    });

   $(".previous").click(function(e) {
       var prev = $(".pages:visible").prev(".pages");
        if(prev.length > 0){
           $(".pages:visible").hide();
           prev.show();
        }
   });
});

Working Example: http://jsfiddle.net/envDx/1/

Upvotes: 2

Related Questions