The left nav Magento code was greatly simplified and appears as such within /template/navigation/left_nav.phtml:

<?php foreach ($this->getStoreCategories() as $_category): ?>
    <?php echo $this->drawItem($_category) ?>
<?php endforeach ?>

When a user lands on a top-level category page, the regular layout is created but the 2nd level children are cloned, then appended after the top-level parent Magento category, then removed. Comments in the jQuery below:

// When Cat is active, pulls siblings out to display alongside
if(  jQuery('.parent.active' , '#leftNav').length > 0 ){
    // store the active, parent Magento category
    var active = jQuery('.parent.active','#leftNav').eq(0);

    // store the <ul> within the parent category
    var activeUl = active.children('ul');

    // store the kids within the parent category
    var activeKids = activeUl.children();

    // find out how many kids are within the parent category
    var activeCount = activeKids.length;

    // if there are more than 'none', continue
    if(activeCount > 0){
        // Real power of jQuery...chaining changes
        // remove the current kids, clone them, add and remove the 'clone' and 'last' class, respectively
        newKids = activeKids.remove().clone().addClass('clone').removeClass('last');

        // then append these cloned kids after the active, parent category
        active.after(newKids);

        activeUl.remove();
    }

Dirty work but it worked well. Please remember, if you’re wanting to have this permanently, build a Magento module to keep things modular, normalized and above all, correct.

$(this)

is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

So for example we have three spans that we want to expand in succession. I don’t know you have a greeting that you want to display at the top of every page: “We Build Websites” “We love SEO” “We’re ashamed but maybe, just a little, we really enjoy N’Sync”…I don’t know, whatever you can think of. To do this, we would select all the spans with the ‘span:eq(0)’ then show the first one. Once the first has been ‘shown’, it triggers the next function which utilizes the selector ‘this’ to look for the ‘next’ span and repeat the process until there are no more ‘next’ spans. Take into account that any span in the markup will be hidden and shown….Any span. Here’s what the code would look like.

$('span:eq(0)').show('fast', function () {
    /* use callee so don't have to name the function */
    $(this).next('span').show('fast', arguments.callee);
  });

Demo for Chaining and Show

All in all, these are some pretty powerful tools for setting up not only eyecandy but real usability for the end user. How would you utilize .show, .hide and chaining to help your users?

The easiest effect to add on is the speed of the function. Once this duration is added, the three methods will animate the the width, height, and opacity simultaneously.  Durations can have either the string ‘fast’ and ‘slow’, which represent 200 and 600 milliseconds respectively, or one can supply his/her own number. Note that when using a string, one must enclose the value in quotation marks but none for a numerical value.

.show('slow') vs .hide(600)

Demo for Speed

Show and Hide are pretty self-explanatory; when used they either reveal or remove an element from displaying.  Toggle, as I understand it, works a bit differently by revealing those that are hidden and hiding those that are revealed.  To the code.

$(document).ready(function()  {
   //we'll put the new code here
});

For this example, we’ll hide a sentence a bit further down the page. To select a given element, one must use the jQuery syntax of

$('css-selector')

Given that this sentence will be given it’s own class, we’ll refer to it as $(‘div.showhidetoggle’).  To attach our selected element to the above .ready(function(){}); we must adapt the jQuery syntax to this:

$(document).ready(function()  {
   $('div.showhidetoggle').hide();
});

Unfortunately, the doc.ready tells this command to run on load, but given that I like all sentences to show up, we’ll move it to a button instead so that you can toggle it.  Go on and check out the:

Demo

It’s a simple concept but there’s so many applications for creating truly ‘eye-candy’ experiences.  Just check out my portfolio to see the toggle button in action.