umidjons/accordion.html

## accordion.html
<!doctype html>
<html lang="en-US" data-ng-app="Accordion">
<head>
    <meta charset="UTF-8">
    <title>AngularJS: Accordion Example with Custom directives</title>
    <script type="text/javascript" src="js/angular.js"></script>
    <style type="text/css">
        .expander{ border: 1px solid black; width: 250px; }

        .expander>.title{ background: black; color: white; padding: .1em .3em; }

        .expander>.body{ padding: .1em .3em; }
    </style>
</head>
<body>

<div data-ng-controller="SomeController">
    <accordion>
        <expander class="expander" data-ng-repeat="expander in expanders" data-expander-title="{{expander.title}}">
            {{expander.text}}
        </expander>
    </accordion>
</div>

<script type="text/javascript">
    angular.module( 'Accordion', [] )
        .directive( 'accordion', function ()
                    {
                        return {
                            restrict  : 'EA',
                            replace   : true,
                            transclude: true,
                            template  : '<div data-ng-transclude=""></div>',
                            controller: function ()
                            {
                                var expanders = [];

                                this.gotOpened = function ( selected_expander )
                                {
                                    angular.forEach( expanders, function ( expander )
                                    {
                                        if ( selected_expander != expander )
                                            expander.showMe = false;
                                    } );
                                };

                                this.addExpander = function ( expander )
                                {
                                    expanders.push( expander );
                                };
                            }
                        };
                    } )
        .directive( 'expander', function ()
                    {
                        return {
                            restrict  : 'EA',
                            replace   : true,
                            transclude: true,
                            require   : '^accordion',
                            scope     : {title: '@expanderTitle'},
                            template  : '<div>' +
                                        '<div class="title" data-ng-click="toggle()">{{title}}</div>' +
                                        '<div class="body" data-ng-show="showMe" data-ng-transclude=""></div>' +
                                        '</div>',
                            link      : function ( scope, element, attrs, accordionController )
                            {
                                scope.showMe = false;
                                accordionController.addExpander( scope );
                                scope.toggle = function ()
                                {
                                    scope.showMe = !scope.showMe;
                                    accordionController.gotOpened( scope );
                                };
                            }
                        }
                    } )
        .controller( 'SomeController', function ( $scope )
                     {
                         $scope.expanders = [
                             {title: 'First Expander', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, sit.'},
                             {title: 'Second Expander', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, incidunt.'},
                             {title: 'Third Expander', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, nam.'}
                         ];
                     } );
</script>
</body>
</html>
	<!doctype html>
	<html lang="en-US" data-ng-app="Accordion">
	<head>
	<meta charset="UTF-8">
	<title>AngularJS: Accordion Example with Custom directives</title>
	<script type="text/javascript" src="js/angular.js"></script>
	<style type="text/css">
	.expander{ border: 1px solid black; width: 250px; }

	.expander>.title{ background: black; color: white; padding: .1em .3em; }

	.expander>.body{ padding: .1em .3em; }
	</style>
	</head>
	<body>

	<div data-ng-controller="SomeController">
	<accordion>
	<expander class="expander" data-ng-repeat="expander in expanders" data-expander-title="{{expander.title}}">
	{{expander.text}}
	</expander>
	</accordion>
	</div>

	<script type="text/javascript">
	angular.module( 'Accordion', [] )
	.directive( 'accordion', function ()
	{
	return {
	restrict : 'EA',
	replace : true,
	transclude: true,
	template : '<div data-ng-transclude=""></div>',
	controller: function ()
	{
	var expanders = [];

	this.gotOpened = function ( selected_expander )
	{
	angular.forEach( expanders, function ( expander )
	{
	if ( selected_expander != expander )
	expander.showMe = false;
	} );
	};

	this.addExpander = function ( expander )
	{
	expanders.push( expander );
	};
	}
	};
	} )
	.directive( 'expander', function ()
	{
	return {
	restrict : 'EA',
	replace : true,
	transclude: true,
	require : '^accordion',
	scope : {title: '@expanderTitle'},
	template : '<div>' +
	'<div class="title" data-ng-click="toggle()">{{title}}</div>' +
	'<div class="body" data-ng-show="showMe" data-ng-transclude=""></div>' +
	'</div>',
	link : function ( scope, element, attrs, accordionController )
	{
	scope.showMe = false;
	accordionController.addExpander( scope );
	scope.toggle = function ()
	{
	scope.showMe = !scope.showMe;
	accordionController.gotOpened( scope );
	};
	}
	}
	} )
	.controller( 'SomeController', function ( $scope )
	{
	$scope.expanders = [
	{title: 'First Expander', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, sit.'},
	{title: 'Second Expander', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, incidunt.'},
	{title: 'Third Expander', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, nam.'}
	];
	} );
	</script>
	</body>
	</html>