'More' expander

HTML

<div id="primary">
    <div id="content-core">
        <div class="portletWrapper">
            <dl class="portlet portletContent">
                <dt class="portletHeader">
                    <a href="#">Programmer</a>
                </dt>
                <dd class="portletItem">
                    <ul>
                        <li>
                            <a href="#">Bærekraftig transport og logistikk</a>
                        </li>
                    </ul>
                    <ul style="display: none;" class="additional">
                        <li>
                            <a href="#">NCoE-programmet om velferdsforskning</a>
                        </li>
                    </ul>
                </dd>
                <dd class="arrow portletFooter">
                    <a href="#" class="tile">More…</a>
                </dd>
            </dl>
        </div>
        <div class="portletWrapper">
            <dl class="portlet portletContent">
                <dt class="portletHeader">
                    <a href="#">Prosjekter</a>
                </dt>
                <dd class="portletItem">
                    <ul>
                        <li>
                            <a href="#">3M Identities in Motion Network</a>
                        </li>
                        <li>
                            <a href="#">A Living Labs network for user-driven innovation of ICT services</a>
                        </li>
                    </ul>
                    <ul style="display: none;" class="additional">
                        <li>
                            <a href="#">Wardrobe</a>
                        </li>
                        <li>
                            <a href="#">Winter School on Dynamos: above, below, and inside the laboratory</a>
                        </li>
                    </ul>
                </dd>
                <dd class="arrow portletFooter">
                    <a href="#" class="tile">More…</a>
               ...

CSS

dl {border: 1px solid Red; margin-bottom: 1em}
dd {margin-left: 1em}
a.activated {color: Grey}

JavaScript

$(document).ready(function() {
    $("#primary .portlet .arrow a.tile").click(function(event) {
        $(this).expander();
        event.preventDefault();
    });
});

//myPlugin.jquery.js
(function($) {
    $.fn.expander = function() {
        return this.each(function() {
            var $this = $(this);

            $this.parent().prev().find('ul.additional').animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 300);
            $this.toggleClass('activated');
        });
    };
})(jQuery);