Guide to collapsing all menus in an Angular 4 Accordion

I am a beginner with Angular 4 and I have implemented an accordion with the structure of Categories, Groups, and Subgroups.

When I click on a category, it displays all the groups within that category. Similarly, when I click on a group, it shows all the subgroups.

Currently, everything is functioning as expected.

What I am trying to achieve is that when I click on a Category again, I want the accordion to close along with all the previously opened groups.

In my current setup, if I open some groups, then close the accordion, and reopen it, it displays the previously opened groups.

I have shared a link to my code on StackBlitz: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ghebrf?file=app/app.component.html

Can anyone offer assistance in resolving this issue?

jqueryhtmlcssangularbootstrap-4

Answer №1

It seems unlikely that achieving your desired outcome using just href and ids is possible, as href only accepts one argument. You can refer to this link for more information.

To ensure all child accordions close when the parent accordion is toggled, I implemented event bindings.

Below is an example of a click event:

<a class="accordion-toggle h6" data-toggle="collapse" data-parent="#accordion1" (click)="onToggle()"  href="#collapseTwo + i">
    {{data?.CAMD_ENTITY_DESC}}
</a>

Furthermore, I utilized ngIf in the following code snippet:

<div [id]="'collapseInnerTwo' + j"  *ngIf="accordion2==true" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">

You can view the complete solution here: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-fjowve?file=app/app.component.html

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

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as inten ...

javascriptjquerycsshover

The blur function in jQuery is not functioning as expected

I'm facing an issue where only the first of my 3 .blur's is working. Here is the jQuery code snippet: <script type='text/javascript'> $(document).ready(function() { $("#user_name").blur(function() { if ($( ...

jqueryhtmlforms

Instructions for compiling node-sass within the present directory for specific files

In my project, the directory structure looks like this: - folder1 - styles1.scss - folder2 - styles2.scss I want to utilize node-sass through the command line to generate the following output: - folder1 - styles1.scss - styles1.css - folder2 ...

cssnpmsassnode-sass

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

What methods can be used by the client-side to determine whether a file has been successfully downloaded or received from

When a client-side file download request is initiated, I dynamically create a form element with hidden attributes and submit it to the server via POST. During this process, I need to display a loading spinner that will be hidden once the download is comple ...

javascriptjavajqueryajaxcookies

Astro Project experiencing issues with loading SRC folder and style tags

After setting up a brand new astro repository with the following commands: npm create astro@latest npm run dev I encountered an issue where the default project template failed to display correctly on my computer. Here is how the page appeared: https://i. ...

javascripthtmlcssgoogle-chromeastrojs

Tips for automatically displaying the first option as selected in an HTML Select dropdown

I have an HTML select element where I want the option chosen by the user to not be displayed in the box. Instead, I would like the box to always show the first option, regardless of what the user selects from the dropdown menu. Below is my CSS code for sty ...

javascriptjqueryhtmlcss

Encountered an issue when attempting to save data to the database using an AJAX request in Symfony 3

i need to input text in a form and store it in my database as well as display it on my view using jQuery. here is the input form: <div class="panel rounded shadow"> <form method="post"> <textarea id="txt" class="form-control in ...

phpjqueryajaxsymfony

The background-size:cover property fails to function properly on iPhone models 4 and 5

I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...

javascripthtmlcssbackground

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Determine the byte size of the ImageData Object

Snippet: // Generate a blank canvas let canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 100; document.body.appendChild(canvas); // Access the drawing context let ctx = canvas.getContext('2d'); // Extrac ...

javascripthtmlhtml5-canvasbyte

Steps for inserting a menu item into a Material UI Card

Below is an example I'm working with: https://codesandbox.io/s/material-ui-card-styling-example-lcup6?fontsize=14 I am trying to add additional menu options such as Edit and Delete to the three dots menu link, but so far I have not been successful. ...

javascriptreactjsangularmaterial-uicard

REST and using a passed authentication token

As I embark on my first journey into REST programming, I find myself grappling with the challenge of passing the session token. Despite scouring various forums for similar issues, I have yet to find a solution. Here is a snippet of Ruby code that I am cur ...

htmlrubyjsonrest

Complete a submission using an anchor (<a>) tag containing a specified value in ASP.Net MVC by utilizing Html.BeginForm

I am currently using Html.BeginFrom to generate a form tag and submit a request for external login providers. The HttpPost action in Account Controller // // POST: /Account/ExternalLogin [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public Acti ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

The suggestions are not being displayed by jquery-typeahead

I have integrated jquery-typeahead into my Angular application. Here is the HTML: <input class="js-typeahead-locations_v1" name="locations_v1[query]" type="search" placeholder="Search here" autocomplete="off"> The controller code snippet is as fol ...

jqueryangularjstypeahead.js

Trouble with CSS styling arising when launching the MVC application on IIS

Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...

cssasp.net-mvciis

Issue with Django and Bootstrap navbar button and search field interaction

After extensive searching and attempts, I have yet to find a solution to my issue. I am currently working on an exercise using Django + Bootstrap to create a navbar. However, I can't seem to get the search button to align properly with the search fiel ...

htmlnavbarbootstrap-5

Eliminate any unnecessary gaps that may exist between the cards within the deck

Utilizing Jinja2 with Flask to render a list on an HTML page, I aim to produce card decks containing data from the list using a Jinja2 loop. This is my current HTML code: <div class="container-fluid"> <div class="row"> <div clas ...

htmlcsstwitter-bootstrapjinja2

Patience is key as you wait for the observable to finish

My methods have dependencies where one method needs to complete before the next can be called. process1(data: string) : Observable<string> { this.dataservice.process(data).subscribe( (response) => { return response. ...

javascriptangulartypescriptrxjsobservable

What is causing this error to appear during the npm install process in my Angular project?

I encountered an issue in my Angular 7 project recently. When running npm install, the following error occurred: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-pro ...

angularnpm