如何折叠和扩展手风琴的每个特定部分

Question

AngularJs Accordion Flow

I am having a difficult time grasping the concept of manipulating accordions I have a step by step module implemented as an accordion. After completion of part 1 of the module, I would like to collapse part 1 and expand part 2. Once part 2 of the module is complete, I want to collapse part 2 and expand part 3 The accordion I am using is as follow: 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>

My initial approach was to give each part of the module and id and manipulate each part through JS How can I collapse and expand each specific part of the accordion?

Answer 1

Here is a fiddle: https://jsfiddle.net/MSclavi/e9vhs0jL/1/

You can use the same idea but with a button inside the accordion. If you have to do something extra (data verification, etc), you can call a function from the buttons ng-click .