CODEWITHSUNDEEP
angularjsaccordion
AlexD
AlexD

Reputation: 4290

Vertical AngularJS Accordion side-by-side

The way accordion is built is one accordion below another I want to be able to make them side by side. I have a button that will open/close everyone at once. I tried adding a span above the accordion-group but it didn't help.

<div id="top-panel" style="height:auto;border-bottom-style: outset;">
    <accordion close-others="false">
        <span ng-repeat="widget in _widgets">
            <accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
                moo
                <button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
            </accordion-group>
        </span>
    </accordion>
</div>
<div id="bottom-panel">
    <div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
        <button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
    </div>
    <div id="preview-panel" style='float:right; width:570px;'>
        <ng-include src="htmlInclude" />
    </div>
</div>

How can I achieve this?

[edit]: I realize I might not have explained this correctly. I want the accordions to be VERTICAL, but just for them to be located side-by-side

[solution]: Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers

Upvotes: 0

Views: 2738

Answers (2)

AlexD
AlexD

Reputation: 4290

Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers

Upvotes: 1

EpicJoker
EpicJoker

Reputation: 349

I have come across a plugin called zAccordian.

http://www.armagost.com/zaccordion/

It is a horizontal accrodian, i think this should suffice for your needs.

If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.

Regards, Warren

Upvotes: 0

Related Questions