Accordian Prototype

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/ng-template" id="partials/accordionpane.html">
    <div class="title">{{title}}</div>
    <div class="content" ng-transclude></div>
</script>

<accordion>
    <accordion-pane title="Meredith Corporation Q3 2012" class="active">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </accordion-pane>
    <accordion-pane title="My Notes">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </accordion-pane>
    <accordion-pane title="Something Else">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </accordion-pane>
</accordion>

CSS

accordion {
    display:block;
    border:3px solid black;
    overflow:hidden;
    height:500px;
    width:500px;
}

accordion-pane {
    display:block;
    height:40px;
    overflow:hidden;
    -moz-transition:height 0.8s ease-out;
    -webkit-transition:height 0.9s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
    -moz-transition-delay:0.15s;
    -webkit-transition-delay:0.90s;
    -o-transition-delay:0.15s;
    transition-delay:0.10s;
}

accordion-pane.active {
    height:420px;
    -moz-transition:height 0.2s ease-out;
    -webkit-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
    -moz-transition-delay:0.15s;
    -webkit-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    transition-delay:0.15s;
    border-bottom:red;
}

accordion-pane .content {
    padding:10px;
}

accordion-pane.active .content {
    display:block;
}

accordion-pane .title {
    padding:10px;
    color:#fff;
    background-color:#333;
    cursor:pointer;
}

JavaScript

var app = angular.module('app', []);

app.directive('accordion', function() {
    var linker = function(scope, elem, attrs) {
    };
    
    return {
        restrict: 'E',
        link: linker
    };
});

app.directive('accordionPane', function() {
    var linker = function(scope, elem, attrs) {
        scope.title = attrs.title;
        
        $('accordion-pane .title').click(function() {
            $('accordion-pane.active').removeClass('active');
            $(this).parent().addClass('active');
        });
    };
    
    return {
        restrict: 'E',
        templateUrl: 'partials/accordionpane.html',
        link: linker,
        transclude: true,
        scope: { 'title': '@' }
    };
});