CODEWITHSUNDEEP
angularjsaccordionangular-ui-bootstrap
Florian Feldhaus
Florian Feldhaus

Reputation: 5942

How to create an Angular UI Bootstrap Accordion Group with no body?

I'm quite happy with the Angular UI Bootstrap Accordion, but I encountered a problem when creating a Accordion Group with no body. The Accordion will always create an empty body and I couldn't find a way to prevent this. Is there a way to prevent the creation of the accordion body or can the accordion group be created in a way that it is not expandable?

Plunker with example

Upvotes: 0

Views: 2759

Answers (1)

dcodesmith
dcodesmith

Reputation: 9614

Accordion Directive

The accordion directive builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.

As I stated in the comment, just use the Collapse directive and style it like an accordion.

Update:

Not styled to perfection but try this

HTML

<div ng-controller="CollapseDemoCtrl">
  <div class="accordion-group" ng-click="isCollapsed = !isCollapsed">
    <div class="accordion-heading">
      <a class="accordion-toggle">Group with body</a>
    </div>
  </div>
  <div collapse="!isCollapsed" class="collapse">
    <div class="well well-large">Some content</div> 
  </div>
</div>

Controller

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = false;
}

plunkr

Upvotes: 1

Related Questions