CODEWITHSUNDEEP
angularjsangular-ui-bootstrapaccordionbootstrap-accordion
ROMANIA_engineer
ROMANIA_engineer

Reputation: 56636

UI Bootstrap Accordion content not showing on click

I'm trying to add an accordion element, but clicking on one accordion header results in nothing (in my application I can actually see the content transition in and then transition out, as if it encountered some condition instructing it to collapse).

I've managed to extract the behaviour in the following codepen: https://codepen.io/deepdown22/pen/LYNQYeb

<div ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello {{name}}</h1>
      <p>Start editing and see your changes reflected here!</p>
    
      {{groups}}

      
    <uib-accordion close-others="true">
    
    <div uib-accordion-group class="panel-default" ng-repeat="group in groups" is-open="group.open">
      <uib-accordion-heading>
        {{group.title}}
      </uib-accordion-heading>
      {{group.content}}
    </div>
    
  </uib-accordion>
    </div>
  </div>

angular.module('plunker', ['ui.bootstrap']);
angular.module('plunker').controller('MainCtrl', function($scope) {
  $scope.name = 'Plunker';
  $scope.groups = [
    {'title': 'a', 'content': 'b'}, 
    {'title': 'c', 'content': 'd'}
   ];
});

I'm sure I'm doing something wrong, but I can't put my finger on what.

Upvotes: 0

Views: 221

Answers (1)

Onur Başt&#252;rk
Onur Başt&#252;rk

Reputation: 735

  1. First check out the documentation for uib-accordion (https://angular-ui.github.io/bootstrap/). You are using it wrong. Not <div uib-accordion> it is <uib-accordion>

  2. Codepen is useless without the css

Upvotes: 1

Related Questions