The Angular UI Bootstrap Accordion currently has the first accordion group closed instead of opened

Question

The Angular UI Bootstrap Accordion currently has the first accordion group closed instead of opened

I am currently utilizing UI-Bootstrap Accordion to populate content from a JSON Object. My goal is to have the first accordion group open by default upon loading, but unfortunately, this feature is not working as expected.

Although I have set is-open to true, it still doesn't seem to be functioning properly. For reference, please take a look at the following Plunker:

Plunker

<uib-accordion close-others="oneAtATime">
        <uib-accordion-group ng-repeat="faq in FAQs" is-open="this.open">
            <uib-accordion-heading>
                <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                </div>
            </uib-accordion-heading>
            <div  ng-bind-html="faq.content"></div>
        </uib-accordion-group>
        </uib-accordion>

Thank you for your assistance.

javascript angularjs angular-ui-bootstrap

Answer 1

Answer №1

Angular comes with some built-in variables for ng-repeat like $index (0..length-1),

$first, $middle, $last, $even, $odd

. These variables can make your work easier :-)

For more information, you can refer to: https://docs.angularjs.org/api/ng/directive/ngRepeat

If you want your expected output, simply use $first in your is.open

<uib-accordion close-others="oneAtATime" ng-repeat="faq in FAQs">
            <uib-accordion-group is-open="$first">
                <uib-accordion-heading>
                    <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                    </div>
                </uib-accordion-heading>

                <div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
             <uib-accordion-group ng-if="!$first" is-open="false">
                <uib-accordion-heading>
                    <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                    </div>
                </uib-accordion-heading>
 
                <div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
            </uib-accordion>

I have also included the Plunker link that I previously shared in my comment :-

plnkr.co/edit/iWEuuv?p=preview

Answer 2

Angular comes with some built-in variables for ng-repeat like $index (0..length-1),

$first, $middle, $last, $even, $odd

. These variables can make your work easier :-)

For more information, you can refer to: https://docs.angularjs.org/api/ng/directive/ngRepeat

If you want your expected output, simply use $first in your is.open

<uib-accordion close-others="oneAtATime" ng-repeat="faq in FAQs">
            <uib-accordion-group is-open="$first">
                <uib-accordion-heading>
                    <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                    </div>
                </uib-accordion-heading>

                <div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
             <uib-accordion-group ng-if="!$first" is-open="false">
                <uib-accordion-heading>
                    <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                    </div>
                </uib-accordion-heading>
 
                <div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
            </uib-accordion>

I have also included the Plunker link that I previously shared in my comment :-

plnkr.co/edit/iWEuuv?p=preview

Answer 3

Answer №2

Simply update is-open="this.open" to is-open="$first" and it will function correctly.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap','ngSanitize']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.FAQs = [
    {
      title: 'Overview',
      content: '<p>This Add-in reviews <b>External Users</b> for a Site Collection if number of days remaining to expire is <b>10 days</b>.Then generate and send <b>warning email</b> notifications to Site Collection Administrators/Person who sent external User Invite and Governance Team Memberrs.The warning email notification will contain following options :<ol><li> Extend Access</li><li> Remove User </li></ol></p><p>The same information regarding external users can be viewed through Site Actions Menu, Site Settings page and one time warning pop-up on site collection. This add-in also provisions an option in Site Actions Menu to display <b>Site Collection administrators</b>.</p>'
    },
    {
      title: 'Who can use?',
      content: '<p>Users with only <b>admin</b> priviledges can view the external user details and edit their access time . However, <b>all</b> users can view the site administrator details. </p>'
    },
    {
      title: 'How to Use?',
      content: '<p><ul><li>The add-in will be installed through <b>Spo.Provision</b> utility.</li><li>Right click on a row to perform \'Extend Access\' or \'Remove User\' operations from context menu.</li><li>In order to perform these opeartions for multiple users, select rows by holding <b>shift/Ctrl</b> keys and click on <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> for extending access and <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> for removing selected users. </li><li><b>  Please note</b> that you cannot extend access if user already has access for maximum limit.</li></ul></p>'
    },
    {
      title: 'Settings & Configuration',
      content: '<p><ul><li>The configuration for timer job such as cut-off time and warning message can be done using App.Config file.</li></ul></p>'
    },
    {
      title: 'Compatibility',
      content: '<p>Compatible with IE10 and upper version. Latest version of Chrome & Firefox.</p>'
    }
  ];

  $scope.status = {
    isFirstOpen: true
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0/angular-sanitize.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="AccordionDemoCtrl">
<h1>OBJECT</h1>
<uib-accordion close-others="oneAtATime">
            <uib-accordion-group ng-repeat="faq in FAQs" is-open="$first">
                <uib-accordion-heading>
<div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
</div>
</uib-accordion-heading>
<div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
</uib-accordion>
    </div>
</body>
</html>

Answer 4

Simply update is-open="this.open" to is-open="$first" and it will function correctly.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap','ngSanitize']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.FAQs = [
    {
      title: 'Overview',
      content: '<p>This Add-in reviews <b>External Users</b> for a Site Collection if number of days remaining to expire is <b>10 days</b>.Then generate and send <b>warning email</b> notifications to Site Collection Administrators/Person who sent external User Invite and Governance Team Memberrs.The warning email notification will contain following options :<ol><li> Extend Access</li><li> Remove User </li></ol></p><p>The same information regarding external users can be viewed through Site Actions Menu, Site Settings page and one time warning pop-up on site collection. This add-in also provisions an option in Site Actions Menu to display <b>Site Collection administrators</b>.</p>'
    },
    {
      title: 'Who can use?',
      content: '<p>Users with only <b>admin</b> priviledges can view the external user details and edit their access time . However, <b>all</b> users can view the site administrator details. </p>'
    },
    {
      title: 'How to Use?',
      content: '<p><ul><li>The add-in will be installed through <b>Spo.Provision</b> utility.</li><li>Right click on a row to perform \'Extend Access\' or \'Remove User\' operations from context menu.</li><li>In order to perform these opeartions for multiple users, select rows by holding <b>shift/Ctrl</b> keys and click on <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> for extending access and <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> for removing selected users. </li><li><b>  Please note</b> that you cannot extend access if user already has access for maximum limit.</li></ul></p>'
    },
    {
      title: 'Settings & Configuration',
      content: '<p><ul><li>The configuration for timer job such as cut-off time and warning message can be done using App.Config file.</li></ul></p>'
    },
    {
      title: 'Compatibility',
      content: '<p>Compatible with IE10 and upper version. Latest version of Chrome & Firefox.</p>'
    }
  ];

  $scope.status = {
    isFirstOpen: true
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0/angular-sanitize.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="AccordionDemoCtrl">
<h1>OBJECT</h1>
<uib-accordion close-others="oneAtATime">
            <uib-accordion-group ng-repeat="faq in FAQs" is-open="$first">
                <uib-accordion-heading>
<div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
</div>
</uib-accordion-heading>
<div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
</uib-accordion>
    </div>
</body>
</html>

The Angular UI Bootstrap Accordion currently has the first accordion group closed instead of opened

Answer №1

Answer №2

Similar questions

Attempted to create a node index.js file but encountered an error

Execute JavaScript using Ajax technology

JavaScript code must be tailored to reference a JS file based on the specific environment, whether it be Production, Development, or staging

Copying elements from ng-repeat scope to outside

Give a discount to each object in an array based on whichever object has the highest paid value in the loop

When the tooltip component is triggered in a React application, the cursor is automatically directed to

An elementary React project facing compilation issues

Acquire the nested object within a MongoDB document using its assigned ID

Deliver integers using Express.js

Using an AngularJs directive to perform form validation on an input field

In TypeScript, the Select element does not contain an options property

Attempting to loop through a list and create a retrieval function for each item

The content entered into the text area does not appear as it was originally typed

What is the best way to make an HTML form show fields depending on certain conditions?

Issue with vue-router redirection when pushing a route

Exploring the world of AngularJS 1.3 with the exciting anticipation of the upcoming release of Angular 2 in just one year

Maintain checkbox selection even after the page is refreshed

HTML code that has been "commented out" means

Working efficiently with query selectors in React using useRef

sending properties to child components without all the required properties