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

Question

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?

It may not be clear, but I do want the next button to be in the same area as the content of the tab so that when it is pressed it will disappear as well. — TaylorAllred
– TaylorAllred, Commented Dec 2, 2014 at 21:36

Harshul Pandav · Accepted Answer · 2014-12-02 21:39:10Z

1

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/

answered Dec 2, 2014 at 21:39

Harshul Pandav

1,03611 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TaylorAllred Over a year ago

While this does not use ui bootstrap or angularjs it seems like it might solve my issue. I will update with details on if it works in my situation or not.

TaylorAllred Over a year ago

So interestingly enough, it works mostly, I modified your fiddle to better suit my needs and it works great in the fiddle, but when I implemnet in into the site I am using it will work on the first next click, then on the second next click it will open the last panel, but won't close the one I was just on. Any thoughts? jsfiddle.net/of55299w/2

vinhboy · Accepted Answer · 2014-12-17 14:47:32Z

0

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>

answered Dec 17, 2014 at 14:47

vinhboy

9,0128 gold badges37 silver badges46 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related