Simple Accordion AngularJS Directive
http://angularjs.org/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div>
<div id="accordion" simple-accordion toggle-easing="linear" slide-up-speed="fast" slide-up-easing="linear">
<h4 class="accordion-toggle">Accordion 1</h4>
<div class="accordion-content default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus faucibus dolor, sed tincidunt diam pellentesque ac. Sed quis cursus orci.</p>
</div>
<h4 class="accordion-toggle">Accordion 2</h4>
<div class="accordion-content default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus faucibus dolor, sed tincidunt diam pellentesque ac. Sed quis cursus orci.</p>
</div>
<h4 class="accordion-toggle last-child">Accordion 3</h4>
<div class="accordion-content default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus faucibus dolor, sed tincidunt diam pellentesque ac. Sed quis cursus orci.</p>
</div>
</div>
</div>
CSS
#accordion {
width: 80%;
margin: 1em auto;
}
.accordion-toggle {
padding: 1em;
border-top: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
margin: 0 auto;
text-align: center;
cursor: pointer;
}
.last-child {
border-bottom: 1px solid #DBDBDB;
}
.accordion-content {
padding: 1em;
background-color: #F6EBF5;
display: block;
}
.accordion-content.default {
display: none;
}
JavaScript
var sampleApp = angular.module('sampleApp', []);
sampleApp.directive('simpleAccordion', function () {
return {
// attribute
restrict: 'A',
scope: {
// default: '400ms'
// options: 'milliseconds', 'slow', or 'fast'
/* toggleSpeed: '@toggleSpeed', */
slideUpSpeed: '@slideUpSpeed',
// default: 'swing'
// options: 'swing', 'linear'
toggleEasing: '@toggleEasing',
slideUpEasing: '@slideUpEasing'
},
link: function (scope, element, attrs) {
element.find('.accordion-toggle').click(function () {
var elem = $(this);
elem.next().slideToggle(scope.toggleSpeed, scope.toggleEasing);
$(".accordion-content").not($(this).next()).slideUp(scope.slideUpSpeed, scope.slideUpEasing);
});
}
};
});