jquery - Slide doesn't work at the second time -

when click on navigation links, current div should slide , new should come down, 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 wrong.

thanks!

try using .data() instead of attr(), they're not 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); // updated row    }); }); 

for further reading:

• what's difference between jquery's data(key,val) , attr(data-key,data-val)

• jquery data() vs attr(data)

• jquery data vs attr?