Jquery sliding brands on click

Question

I would like to use a jQuery effect from ASOS - http://www.asos.com/Men/A-To-Z-Of-Brands/Cat/pgehtml.aspx?cid=1361#

The nice thing is when you click a letter it slides to the specific row

The problem is there is a character limit in the CMS database of my site therefore the tables used in ASOS are too bulky to use. Do you have any idea of a way round this with divs?

Answer 1

You can use jQuery's slideUp() and slideDown() methods to simulate this sliding.

Say the table is at 'a' and you want to slide to 'c', you can use jQuery to slideUp 'a' and once that's done use jQuery again to slideUp 'b'. You'll have to specify this using the callback function for slideUp(). The same thing applies for reshowing elements (i.e you're going from 'c' to 'a'), except you use slideDown() to unhide your elements. Here's some code I wrote as an example:

function hideRecur(startLetterEl, stopLetterEl){
    if( startLetterEl === stopLetterEl ){
        return;
    }
    $(startLetterEl).slideUp("slow", 
        function(){ 
            var nextEl = $(startLetterEl).next()[0];
            if( nextEl){
                hideRecur(nextEl, stopLetterEl);
            }
        }
    );
}
function showRecur(startLetterEl, stopLetterEl){
    if( startLetterEl === stopLetterEl ){
        return;
    }
    $(startLetterEl).slideDown("slow", 
        function(){ 
            var prevEl = $(startLetterEl).prev()[0];
            if( prevEl){
                showRecur(prevEl, stopLetterEl);
            }
        }
    );
}

Here's a jsfiddle demonstrating this