CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
TaylorAllred
TaylorAllred

Reputation: 1231

ui bootstrap accordion, using buttons to open instead of the header

So with the normal ui bootstrap accordion to open the tab you select the the header; simple, looks good, works well.

However, I would like to alter it so instead of using the header to open each section, you would need to press a button. So if you had your normal accordion with say 3 headers, the first one would of course be open, along with the content of that section there would also be a button that says next that would open the next header in line.

I have tried combining things from the tab and collapsible section but to no avail.

Any ideas?

Upvotes: 1

Views: 1646

Answers (2)

vinhboy
vinhboy

Reputation: 8982

http://plnkr.co/edit/KcVqv5Jz80ZnGBiTultl?p=preview

Key things

1) You have to save the is-open state of the accordion you want to control

<accordion-group is-open="heading1.isOpen">

2) Toggle that is-open state with ng-click, or whatever

<button class="btn btn-default btn-sm" ng-click="heading1.isOpen = !heading1.isOpen">Toggle 1</button>

Upvotes: 0

Harshul Pandav
Harshul Pandav

Reputation: 1036

In the content under the first Header, you will need to add a button with the attributes shown below

<button type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Next</button>

Here's the fiddle: http://jsfiddle.net/of55299w/

Upvotes: 1

Related Questions