'iplayer' style content accordion/slider
I'd normally suggest you post this on StackOverflow  as it doesn 't work properly.

Firstly:


You have the same two functions repeated over and over .... don't.  Put them in one big selector.

$('#accordion &gt; li.bg1 .heading, #accordion &gt; li.bg2 .heading, a.see-more-p, #accordion &gt; li.bg1 .heading-side').toggle

You have two headings for each. Semantically this is wrong. change your .heading-side to .heading.side. then all you need is an addClass('side'); and removeClass('side');
also you will need:

ul.accordion li .heading.side .right{ display: none; }


to hide the &gt;.
To get the fadeIn/Out:

.fadeOut(500).queue(function(next) {
    $(this).addClass("side");
    next();
}).fadeIn(500);


That looks confusing with the .queue(... but that's just to make sure it happens between the fading so the user doesn't see any oddness.
The toggle only toggles for that specific context (i.e. the element being clicked) so it will toggle for each element, hence the double clickyness.
My solution is to roll your own toggling:

$(function() {
    var first = true;
    $('#accordion &gt; li.bg1 .heading, #accordion &gt; li.bg2 .heading, a.see-more-p, #accordion &gt; li.bg1 .heading-side')
    .click(function() {
        if (first) {
            //do first stuff
        }else{
            // do second stuff
        }
        first = !first; // &lt; --- Toggling done here!!!!
    });
});



Viola! see jsFiddle for my awesomeness!