Accordion with angularjs

by Marcus Baptiste

HTML

<div ng-app="myApp" ng-controller="sectionsCtrl" >
  <div class="section" ng-repeat='section in sections'>
    <button class="section-toggle" ng-click="toggleSection(section)"> V </button>
    <div class="section-content" ng-show="section.active">{{ section.conent }}</div>
  </div>
</div>

CSS

.section {
  width: 50%;
  height: auto;
  margin: 0 auto;
}

.section-toggle {
  width: 100%;  
  height: 30px;
  background-color: #aaa;
  color: #fff;
}

.section-content {
  width: 100%;
  height: auto;
  background-color: #ccc;
}

JavaScript

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

app.controller('sectionsCtrl', function($scope) {
	$scope.sections = [
  	{ active: true, content: 'fdafda dafda f dafdaf dafd afdafdafaf afda daf afdafd adafd afd afda fda fdaf' },
    { active: false, content: 'fdafdafda da da dasf af asfa fda dfa fdaf dafd da daf afd' },
    { active: false, content: 'fdafda das daf sdafsadfdas f dsafda fdafd a add dafda fdafdafdafda afdafdafda dafd faf afd afda fdafdafdafd da dafdfd fdf da dafd fda dafdfadfa d da d ad ada fedad da daf d' },
    { active: false, content: 'fdaf daf af dafd af af afd a' }
  ];
  
  $scope.activeSection = $scope.sections[0];
  
  $scope.toggleSection = function (section) {
  	$scope.activeSection.active = false;
  	section.active = true;
    $scope.activeSection = section;
  };
});