Creating a "Expand All" feature for Bootstrap UI accordion to easily display all content

Currently, I am utilizing the uib-accordion directive and I aim to include a button that can expand or close all elements within the accordion. Here is the code snippet I have written:

<uib-accordion close-others="false">
    <div align="right">
      <a href="" ng-click="showFunc = !showFunc"> {{ showFunc ? "Hide all" : "Show all" }} </a>
    </div>
    <uib-accordion-group is-open="showFunc" ng-repeat="fun in functions" heading="{{ fun.name }}" is-disabled="!fun.show">
    </uib-accordion-group>

When it comes to clicking on the expand all button, it works fine unless you click on each panel individually. This action creates the showFunc variable inside the scope of the panel, which the is-show directive then retrieves.

Any suggestions on how this could be better implemented? Currently, my Angular version is 1.6.2.

Thank you.

javascriptangularjsangular-ui-bootstrapuib

Answer №1

It appears that you are intertwining various variables in different contexts, creating confusion (each iteration of ngRepeat generates a unique context, and it seems like you are assigning each one a different showFunc variable). To streamline this process, consider setting a global variable for the accordion, toggling it upon button click, and then assigning all is-open object properties to that value. I personally bind an open property to each object to facilitate navigation through the objects and access it easily.

HTML

<div uib-accordion-group is-open="fun.open" ng-repeat="fun in funcs" class="panel-default"
     heading="{{ fun.name }}">
  {{fun.name}}
</div>

JS

$scope.allOpen = false; // all are closed

// call this function on button click
$scope.openAll = function() {
    $scope.allOpen = !$scope.allOpen; // toggle here 

    $scope.funcs.forEach((f) => {
        f.open = $scope.allOpen;
    });
};

Utilizing forEach for simplicity

Demo plunker

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Coldbox handler does not receive the data from AJAX call

In my current project, I encountered a strange issue while making an $.ajax call to a Coldbox handler method. When I dump the rc scope at the beginning of the handler, there's no data in it other than my usual additions on each request. Even more biz ...

javascriptjqueryajaxcoldfusioncoldbox

Implementing AngularJS material design aesthetics to programmatically generated elements

I am working on an AngularJS application and I have a requirement to dynamically add AngularJS material components using Jquery upon clicking a button. While the components are successfully being added to the layout, the styles are not being applied to th ...

jqueryangularjsangular-material

Decoding JSON data with JavaScript

My JavaScript code is giving me trouble. I am using an ajax method that returns a JSON string like this: { "ObjectResponse": { "Operation": "OK", "Response": "SUCCESS", "Message": "List of AAA Found", "List": [ { "keySourc ...

javascriptajaxjson

Alert triggers a transformation in the background

Can someone help me figure out this issue? https://jsfiddle.net/eddnhc5f/ I've noticed that when I press the key c on Firefox and Microsoft Edge, the background changes before the alert pops up. However, in Opera and Chrome, the background changes a ...

javascriptjqueryhtmlcssbackground

Transferring callback functions from JavaScript to Java in Android

As I work on developing an Android app using HTML5/JavaScript, I've encountered some limitations. One challenge I face is calling a function implemented in Java code from within JavaScript, specifically to create a particular type of dialog. While the ...

javajavascriptandroidcordova

Issue: The variable '$viewMap[...]' is either null or undefined

Unfortunately, my knowledge of jQuery/Javascript is quite limited. I am encountering a Javascript error when trying to change the "how did you hear about us" dropdown on a form. The error message states: Error: '$viewMap[...]' is null or not an ...

javascriptjquery

A guide on extracting attribute values with special characters in HTML

I have a requirement where I need to extract an ID from a JSON response. This ID is in the format "TICKET NUMBER (TK)". In the HTML component, there is an attribute called CI which has the same value as the ID. However, when I try to access any attribute ...

javascriptjqueryhtmlangularjs

Generate list items based on a PHP array using JavaScript

Upon fetching data from my database, I receive a PHP array structured as follows: $dbResult = array([0] => array([a] => 1 [b] => 1 [c] => 1) [1] => array([a] => 2 [b] => 2 [c] => 2) [3] => arr ...

javascriptphparrays

The value of req.user is not defined in a stack involving node, express, passport,

When I use console.log(req.session); I receive the message: Session {cookie:{ path: '/',_expires: null,originalMaxAge: null,httpOnly:true },passport: { user: 5b427a2d117d7c3f6087db8a } } However, when using console.log(req.user); I get un ...

javascriptnode.jsexpresspassport.js

Combining arrays into an Object with zipped keys and values

I have some data that I am working with var foo = ['US','MX','NZ']; var foo1 = [12',13',17]; var Object = {}; I attempted a solution by doing the following var Object = {foo:foo1} Unfortunately, this approa ...

javascriptjquery

Sequentially calling URLs in Selenium NodeJS to retrieve the page source of each

I am trying to open URLs based on the IDs available in an array and retrieve the unique PageSource for each. However, when I run the code below, only the PageSource of the last element is being returned. For example, if the body of each URL looks like: ...

javascriptnode.jsseleniumselenium-webdriver

"Functionality requiring Javascript is not enabled following an AJAX call until the page is

I've created a system that can generate an online form page and send it to a printer. This system utilizes AJAX to extract data from an existing page and send it to a Java servlet. The servlet then constructs the HTML and sends it back, where it is d ...

javascriptajax

Is there a way to set up automatic switching to a minimized browser window when receiving an alert, even if you are currently using a different window like Outlook or Explorer?

Is there a way to automatically switch to a minimized browser window from a different program window (such as Outlook or Explorer) when an alert is received on a specific tab? I'm looking for a Javascript/Jquery solution. I've attempted the foll ...

javascriptjquery

Asynchronous JavaScript function within a loop fails to refresh the document object model (DOM) despite

I have been working on a function that utilizes ajax to retrieve instructions from a backend server while the page is loading. The ajax code I've written retrieves the instructions based on the number provided and displays them using the response.setT ...

javascriptjqueryhtmlajaxdom

Having trouble showing Firestore timestamp as a date in an Angular template using toDate()

I'm working on a code snippet that retrieves data from the Accounts collection: db.collection("Accounts").get().then((querySnapshot) => { if (!querySnapshot.empty) { $scope.accounts = querySnapshot.docs.map(doc => doc.da ...

angularjsgoogle-cloud-firestore

Waiting for a promise in node.js that is not yet resolved

I have an async function in my "app.js" that is waiting for a connection to be ready from the imported connection.js file. I am struggling with getting app.js to work correctly with the "await". I am unable to add an export in the 'on' function ...

javascriptnode.jspromise

Designing a calendar with a grid template

I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...

javascriptcssreactjscalendar

Best Practices for Managing Data Across Multiple Locations in Angular.js

Currently, I am in the process of setting up a basic online shopping application using Angular.js. To display both an item list and item details, I utilize the ng-route module. For the item-list route, I employ resolve to load a JSON file containing vario ...

angularjsangularjs-routing

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

My curiosity lies in understanding how front-end javascript libraries such as Vue and Angular can seamlessly integrate with other libraries and assets. For instance, if I were to procure a website template already equipped with additional javascript, is it ...

javascriptangularvue.js

Is it better to have JavaScript and HTML in separate files or combined into a single HTML file?

Do you notice any difference when coding in both HTML and JavaScript within a single .html file compared to separating HTML code in a .html file and JavaScript code in a .js file? Does the functionality remain the same in both scenarios? For example, in t ...

javascripthtmlcompilationbrowserify