CODEWITHSUNDEEP
jqueryhtml
Lumoris
Lumoris

Reputation: 29

Slide doesn't work at the second time

When I click on my navigation links, the current div should slide up and the new should come down, but it only works once.

jsFiddle

 $(".nav-link").click(function(){
       var page = $(this).data("page");
       var active = $("#viewport").data("active");
       $(active).slideUp(500, function(){
           $(active).css({'display':'none'});
           $(page).slideDown(250);
           $("#viewport").attr("data-active", page);
       });
    });

I have no idea what is wrong.

Thanks!

Upvotes: 0

Views: 163

Answers (2)

Farhan
Farhan

Reputation: 752

Try this

$(document).ready(function () {
    $("#startseite").css({
        'display': 'block'
    });

    $(".nav-link").click(function () {
        var page = $(this).attr("data-page");
        var active = $("#viewport").attr("data-active");
        $(active).slideUp(500, function () {
            $(active).css({
                'display': 'none'
            });
            $(page).slideDown(250);
            $("#viewport").attr("data-active", page);
            page = 0;
            active = 0;
        });
    });

    /*  $("#nav-slider").slider();*/
});

Upvotes: 0

Itay
Itay

Reputation: 16777

Try using .data() instead of attr(), they're not the exact same

$(".nav-link").click(function(){
   var page = $(this).data("page");
   var active = $("#viewport").data("active");
   $(active).slideUp(500, function(){
       $(active).css({'display':'none'});
       $(page).slideDown(250);
       $("#viewport").data("active", page); // The updated row
   });
});

For further reading:

Upvotes: 2

Related Questions