User:Arkondi/horizontalCollapse.js

function horizontalCollapse { // fix the height of the content to avoid not so nice temporary visual effect $('.horizontal-collapse-right, .horizontal-collapse-left').find('.mw-collapsible-content').each(function{$(this).height($(this).height)});

$('.horizontal-collapse-right').find('.mw-collapsible-toggle')

// remove the old collapse function of 'makeCollapsible' .unbind('click.mw-collapse')

// bind the new collapse function .bind('click.mw-collapse', function {

var // content is used more than once content = $(this).parent.find('.mw-collapsible-content'),

// determine collapse state wascollapsed = $(this).hasClass('mw-collapsible-toggle-collapsed');

// toggle display of provided 'button' $(this).find('.expand, .collapse').toggle;

// toggle classes as it's done by makeCollapsible $(this) .toggleClass('mw-collapsible-toggle-collapsed', !wascollapsed) .toggleClass('mw-collapsible-toggle-expanded', wascollapsed); // collapse the content to the right side content.animate({           left: parseInt(content.css('left'),10) == 0 ? content.outerWidth : 0,            width: 'toggle'            }); });

// see above; variable content not needed, because only used once $('.horizontal-collapse-left').find('.mw-collapsible-toggle') .unbind('click.mw-collapse') .bind('click.mw-collapse', function {       var wascollapsed = $(this).hasClass('mw-collapsible-toggle-collapsed');        $(this).find('.expand, .collapse').toggle;        $(this)            .toggleClass('mw-collapsible-toggle-collapsed', !wascollapsed)            .toggleClass('mw-collapsible-toggle-expanded', wascollapsed);        $(this).parent.find('.mw-collapsible-content').animate({ width: 'toggle' });   }); }