CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

how to hide previous one when showing next one with jquery?

I ain't find the vertical news scroller for joomla 2.5 So I wanted to make my own.

Firstly I have hidden first two lists and then I wanted to show next list when clicked but I'm doing wrong

$('ul li').slice(2).hide();
$('#up').on('click',function(){
    $('ul li').slice(3).hide();    
});

here is the demo

I also wanted to show the next list and hide the previous first list. How can I do?

Edit

Okay now I have made working like using this demo

var countnews = 3;
$('ul li').slice(countnews).hide();
$('#up').on('click',function(){
    $('ul li').show();    
    $('ul li').slice(countnews++).hide();
});

Now, how can I hide the previous one when showing next one?

Upvotes: 0

Views: 119

Answers (4)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

var start = 0;
var end = 3;
var len=$('li').length;
$('ul li').hide().slice(start, end).show();
$('#up').on('click',function(){
    if(end<len)
    {
       start++;end++;
       $('ul li').hide().slice(start, end).show();    
    }
});

Fiddle

For down

$('#down').on('click',function(){
    if(start>0)
    {
       start--;end--;
       $('ul li').hide().slice(start, end).show();    
    }
});

Updated Fiddle

Updated code with animation

$('#up').on('click',function(){
    if(end<len)
    {
        $('ul li').slice(start, end).slideUp(500);  
        start++;end++;
        setTimeout(function(){
           $('ul li').hide().slice(start, end).slideDown(500); 
        },500);

    }
});
$('#down').on('click',function(){
    if(start>0)
    {
         $('ul li').slice(start, end).slideUp(500);  
         start--;end--;
         setTimeout(function(){
            $('ul li').hide().slice(start, end).slideDown(500); 
         },500);
    }
});

Animated Fiddle

Upvotes: 1

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

You need to give script like this

  $(document).ready(function(){     
        $('ul li').slice(3).hide();
        $("#up").click(function(){
            $('ul li').show();
            $('ul li').slice(0,3).hide()
            //alert('dk');

         });    

        })

Upvotes: 0

Tomasz Kapłoński
Tomasz Kapłoński

Reputation: 1378

There's very nice implementation of such behavior in jQueryUi named Accordion - try to use it (or just check the source as a base for your specific needs)

Upvotes: 0

bhb
bhb

Reputation: 2561

How about this

var start = 0;
var end = 2;

$('ul li').hide().slice(start, end ).show();
$('#up').on('click',function(){
    //$('ul li').show();
    start++;end++;
    //alert(start)
    $('ul li').hide().slice(start, end ).show();    
});

Update fiddle to work with both up and down . Fiddle

Upvotes: 1

Related Questions