var app = angular.module('myApp',[]);
<div ng-init="accordion=1"> <h3 class="accordion" ng-class="{active:accordion==1}"> <a href ng-click="accordion = 1">Section 1</a> </h3> <p class="accordion-content" ng-show="accordion==1">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <h3 class="accordion" ng-class="{active:accordion==2}"> <a href ng-click="accordion = 2">Section 2</a> </h3> <p class="accordion-content" ng-show="accordion==2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <h3 class="accordion" ng-class="{active:accordion==3}"> <a href ng-click="accordion = 3">Section 3</a> </h3> <p class="accordion-content" ng-show="accordion==3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p> </div>
*{ font-family: Arial; font-size: 13px; line-height: 140%; } h3.accordion{ margin: 0; } .accordion a{ padding: 10px; background: #ddd; color: #333; text-decoration: none; font-weight: bold; display: block; margin-bottom: 1px; } .accordion-content{ border: 1px solid #ddd; padding: 10px; margin: 1px 0; }