How to create a collapse feature that allows only one item to be open at a time in Angular

I developed an angular app with a collapse feature, but I noticed that multiple collapses can be open at once. I am utilizing Ng-Bootstrap collapse for this functionality. Below is the code snippet from the TS file:

public isCollapsed = true;

And here is the corresponding HTML code:

<tr
        class="row-green pe-auto"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!isCollapsed"
      >
        ...

        ...

        ...
      </tr>

      <tr class="clp-row clp-r1">
        ...

        ...

        ...
      </tr>

      <tr
        class="row-blue"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!isCollapsed"
      >
        ...

        ...

        ...
      </tr>
      <tr class="clp-row clp-r1">
        ...

        ...

        ...
      </tr>

I want to ensure that each collapsible section functions independently so that opening one does not impact the others.

angulartypescriptlayoutng-bootstrapcollapsable

Answer №1

To ensure each collapsible operates independently, it is necessary to create a separate boolean variable for each.

public isCollapsed1 = true;
public isCollapsed2 = true;

By maintaining separate states for each collapsible, expanding one will not affect the other.

<tr
  class="row-green pe-auto"
  (click)="collapse1.toggle()"
  [attr.aria-expanded]="!isCollapsed1"
>
  <td>
    <img
      src="assets/images/home/row-expand.png"
      data-toggle="collapse"
      data-target=".row1-hide"
    />
    Created
  </td>

  <td>User </td>
  <td>Tuesday</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row1-hide"
      #collapse1="ngbCollapse"
      [(ngbCollapse)]="isCollapsed1"
    >
      <div class="t-logdiv">
        <!-- Content for collapsible 1 -->
      </div>
    </div>
  </td>
</tr>

<tr
  class="row-blue"
  (click)="collapse2.toggle()"
  [attr.aria-expanded]="!isCollapsed2"
>
  <td>
    <img
      src="assets/images/home/row-expand.png"
      data-toggle="collapse"
      data-target=".row2-hide"
    />
    Created user
  </td>

  <td>new kiid - Joey</td>
  <td>Tue 10</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row2-hide"
      #collapse2="ngbCollapse"
      [(ngbCollapse)]="isCollapsed2"
    >
      <div class="t-logdiv">
        <!-- Content for collapsible 2 -->
      </div>
    </div>
  </td>
</tr>

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

New post: "Exploring the latest features in Angular

Looking for help with integrating Angular and SpringREST to fetch data from the backend? Here's my situation: I need to retrieve a JSON string from the backend using a POST request, send it to my site's hosted link, and display it on the user int ...

javascriptangulartypescript

Error: Failed to locate package "package-name" in the "npm" registry during yarn installation

While working on a large project with numerous sub-projects, I attempted to install two new packages. However, YARN was unable to locate the packages despite the .npmrc being present in the main directory. ...

typescriptnpmyarnpkg

The 'import.meta' meta-property can only be used with the '--module' set to 'es2020', 'esnext', or 'system'.ts(1343)

Whenever I attempt to utilize import.meta.url (as demonstrated in the Parcel docs), I am consistently met with the error message "The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es ...

reactjstypescriptimagedynamicparceljs

When deploying, an error is occurring where variables and objects are becoming undefined

I've hit a roadblock while deploying my project on Vercel due to an issue with prerendering. It seems like prerendering is causing my variables/objects to be undefined, which I will later receive from users. Attached below is the screenshot of the bui ...

javascriptreactjstypescriptnext.jsvercel

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

I am struggling with this TypeScript code that contains comments and seems a bit messy: function getPlacesToStopExchange(): { our: { i: number; val: number; }[]; enemy: { i: number; val: number; }[]; //[party in 'our' | 'enemy' ]: ...

javascripttypescriptdebuggingcompiler-errorstsc

Tips for defining types for specific CSS properties in TypeScript, such as variables

Perhaps there are already solutions out there, and I appreciate it if you can share a link to an existing thread. Nevertheless... In React, when I use the style prop, I receive good autocompletion and validation features like this example: What am I look ...

csstypescript

Enriching HtmlElement with a type property using TypeScript

Check out my TypeScript code snippet below: let script: HTMLElement = document.createElement("script"); script.appendChild(document.createTextNode(` { "json": "property" } `)); script.id = 'appContextModel'; document.body.appendChild(scr ...

angulartypescript

The 'in' operator is unable to find 'colour' within true (function return type)

Here's the TypeScript code I'm working with: let a: unknown = true; if(hasColour(a)) { console.log(a.colour); // Using a.colour after confirming a has the colour property } I've created a function to check if the color property exist ...

typescript

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. .html <ion-slides [pager]="true" [slidesPerView]="2"> <ion ...

cssangulartypescriptionic3swiper.js

Vue cannot detect the component that is provided by my plugin

This unique plugin, currently only includes a single component (coded in TypeScript): import _Vue, { PluginObject } from "Vue"; import MyComponent from "./MyComponent.vue"; const VuePlugin: PluginObject<void> = { install(Vue: typeof _Vue): void { ...

typescriptvue.jsvuejs2vue-component

Validating Inputs with an Array of Values in my Angular 2 Application

I have been exploring ways to retrieve data from an array of values instead of a single value when using [(ngModel)] binding in my Angular 2 application. The current setup functions perfectly with a single value, as shown below. The data is pulled from the ...

javascriptangulartypescript

Transform array of elements from type T1 to element in the array to type T2

Here is a Typescript class I am working with: export class Envelope<T> { result: T; constructor(result: T) { this.result = result; } } I'm trying to convert Envelope<RecentPostResponse[]> to Observable<PostModel[]>: getP ...

angulartypescriptrxjs

Definitions for nested directories within a main index.d.ts

We have developed custom typings for the latest version of material-ui@next and successfully included them in the library during the last beta release. For those interested, you can access the index.d.ts file here. However, there seems to be a problem wi ...

typescriptmaterial-uidefinitelytyped

NPM installation stalls only when attempting to install the specific package, ts-jest

https://i.stack.imgur.com/Cvon1.png I've encountered an issue while trying to set up ts-jest in a new project. Here's what I've tried: $ mkdir test && cd test $ npm init -y $ npm install ts-jest Despite being able to install other ...

typescriptnpmts-jest

Acquiring a second access token in Java for the Graph API using an OIDC-compliant token can be achieved through the OBO flow method

Utilizing the angular-oauth2-oidc library within Angular allows me to login through the PKCE Authorization Flow, followed by passing the token to my backend in order to secure my custom API. The Spring boot backend functions as the oauth2 Resource Server ...

javaangularazure-active-directorymicrosoft-graph-apiopenid-connect

Converting cURL commands to work with Angular versions 2, 4, or 5: A

Can you help me convert this cURL command to Angular 2, 4, or 5 for connecting to an API? curl -k -i -X GET -H "Content-Type: application/json" -u username:"password" https://myRESTFULL_API_URL I was thinking of using something like th ...

angularrestcurlhttps

Ways to resolve the issue: ""@angular/fire"' does not contain the exported member 'AngularFireModule'.ts(2305) in an ionic, firebase, and

I am facing an issue while attempting to establish a connection between my app and a firebase database. The problem arises as I receive 4 error messages in the app.module.ts file: '"@angular/fire"' has no exported member 'AngularFi ...

angulartypescriptfirebaseionic-framework

Creating conditional statements in Angular 2 templates - the power of if, elseif

Can the if elseif else structure be used in an Angular 2 template? Here is an example of using if else: [text]="company ? company.name : 'Select a company'" I am looking to incorporate elseif into this. ...

angular

Changing the fill color of externally imported SVGs from a CDN: A simple guide

While working on a website project using Next JS, I came across the challenge of displaying SVG icons stored in Sanity and dynamically changing their fill color. Is it possible to achieve this feature, such as changing the color when hovering over the icon ...

typescriptsvgnext.jssanitynextjs-image

Enhancing user interaction in Angular by implementing a mouseover and mouseleave event listener on an element

I've been working on implementing a hover-over zoom functionality for my images. I created a custom function and tried to integrate it into the ngOnInit() {} method, but unfortunately, the functionality is not working as expected. @Component({ se ...

angularzooming