JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <!-- Le styles -->

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
</head>
<body>
<accordion>
    <group title="pane1">
    </group>
    <group title="pane2">
    </group>
</accordion>
</body>
</html>

JavaScript

angular.module('components', []).
    directive('accordion', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            controller: function($scope, $element) {
                var groups = $scope.groups = [];

                $scope.select = function(group) {
                    angular.forEach(groups, function(group) {
                        group.selected = false;
                    });
                    group.selected = true;
                }

                this.addPane = function(group) {
                    if (groups.length == 0) $scope.select(group);
                    groups.push(group);
                }
            },
            template:
                '<div class="accordion" id="accordion2">'+
                    '<div class="accordion-group" ng-repeat="group in groups">'+
                        '<div class="accordion-heading">'+
                            '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="" ng-click="select(group)">'+
                            '{{group.title}}'+
                            '</a>'+
                        '</div>'+
                        '<div class="accordion-body collapse">'+
                            '<div class="accordion-inner" ng-transclude>'+

                            '</div>' +
                        ' </div>' +
                    '</div>' +
                '</div>',
            replace: true
        };
    }).
    directive('group', function() {
        return {
            require: '^accordion',
            restrict: 'E',
            transclude: true,
            scope: { title: 'bind' },
            link: function(scope, element, attrs, accordionCtrl) {
                accordionCtrl.addPane(scope);
            },
            template:
                '<div ng-transclude>' +
                '</div>',
            replace: true
        };
    })