Exploring AngularJs Accordions
I'm struggling to understand how to control accordions in AngularJS. I have a step-by-step module set up as an accordion and I want to collapse one part while expanding another based on completion. Here is the accordion structure I am working with: https://jsfiddle.net/b0yc246z/
<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>
I initially attempted to use IDs for each section and manipulate them through JavaScript. How can I effectively collapse and expand specific parts of the accordion?