Effortlessly collapsing cards using Angular 2 and Bootstrap

Recently delving into Angular 2 and Bootstrap 4, I set up an about page using the card class from Bootstrap. Clicking on a card causes it to expand, and clicking again collapses it. Now, I want to enhance this by ensuring that only one card is open at a time. When I click on a new card, the previously open card should automatically close.

Here's a snippet of my HTML file:

    <div class="card">
            <div class="card-header" (click)="toggleShowSystemRequirements()">
              <h4>
                System Requirements
                <span class="pull-right" *ngIf="!showSystemRequirements"><i class="fa fa-chevron-down"></i></span>
                <span class="pull-right" *ngIf="showSystemRequirements"><i class="fa fa-chevron-up"></i></span>
              </h4>
            </div>
            <div *ngIf="showSystemRequirements" class="card-block">
              <p>Software will operate on the following computers:</p>
              <ul>
                <li>
                  64-bit or 32-bit computer running Windows OS
                </li>
                <li>
                  64-bit or 32-bit computer running Linux OS
                </li>
                <li>
                  Mac OS X
                </li>
              </ul>
            </div>
          </div>
<div class="card">
        <div class="card-header" (click)="toggleShowPSAT()">
         <h4>
              PSAT
           <span class="pull-right" *ngIf="!showPSAT"><i class="fa fa-chevron-down"></i></span>
           <span class="pull-right" *ngIf="showPSAT"><i class="fa fa-chevron-up"></i></span>
          </h4>
        </div>
        <div *ngIf="showPSAT" class="card-block">
            <p>

            </p>

            <h4>Intended Users</h4>
            <p>

            </p>

            <h4>Inputs</h4>
            <p></p>
            <ul>
              <li>P</li>
              <li>System</li>
              <li>Number</li>
            </ul>

            <h4>Outputs</h4>
            <p>Base</p>
            <ul>

              <li>Optimization 
              </li>
            </ul>
          </div>
        </div>

Additionally, here's the TS file related to this functionality:

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-about-page',
  templateUrl: './about-page.component.html',
  styleUrls: ['./about-page.component.css']
})
export class AboutPageComponent implements OnInit {

  showSystemRequirements: boolean = false;
  showPSAT: boolean = false;
  showPHAST: boolean = false;
  constructor() { }

  ngOnInit() {
  }


  toggleShowSystemRequirements() {
    this.showSystemRequirements = !this.showSystemRequirements;
  }
  toggleShowPSAT() {
    this.showPSAT = !this.showPSAT;
  }
  toggleShowPHAST() {
    this.showPHAST = !this.showPHAST;
  }
}

Answer №1

If you're looking for a solution, one idea that comes to mind is creating a new function called clearAll. This function can reset all your flags to false and be called within your click functions for all cards.

    toggleShowSystemRequirements() {
    if(this.showSystemRequirements == false){
    this.clearAll()
    }

    this.showSystemRequirements = !this.showSystemRequirements;
  }


clearAll(flag){
this.showSystemRequirements  = false;
this.showPHAST = false;
this.showPSAT = false;
}

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

The type 'Observable<Subscription>' does not match the type 'Observable<MyData>' in RxJS Angular

When utilizing Angular, I've developed a service that retrieves data from multiple sources and combines it with the original service. Below is the code snippet: searchData(): Observable<MyData> { const url = `${this.context}/search`; ret ...

Pages in Angular are being loaded multiple times when they are loaded with various parameter values

I have encountered an issue with my page setup that involves contracts and chats. Each chat corresponds to a specific contract, and depending on which chat or contract is open, the URL changes accordingly: david/contracts -> david/contracts/12 david/c ...

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

The process of converting a video URI to a blob is encountering difficulties when using the Ionic framework on iOS devices

I have implemented the code below to convert a video file into a blob for iOS. Takevideo() { const options: CameraOptions = { sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, destinationType: this.camera ...

What could be causing Bootstrap to fail in my Angular implementation?

It seems like I have successfully imported everything... angular.json: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects ...

From where does useTranslate fetch the translations?

I have started my journey to learn React with NextJS and recently purchased this amazing template. While exploring the src/pages/terms.tsx file, I came across some quite complex code. One thing that intrigued me was the question: What does the ? in conten ...

We were unable to identify any Next.js version in your project. Please ensure that the `"next"` package is installed in either the "dependencies" or "devDependencies" section

My attempt to deploy a Next app using the Vercel CLI has hit a roadblock. After running vercel build with no errors, I proceeded to deploy with vercel deploy --prebuilt, which also went smoothly. However, when trying to move the project from the preview en ...

The API endpoint returns a 404 not found error on NextJS 14 in the production environment, while it functions correctly on the local

I am in the process of creating a small website using NEXT JS 14. On my website, there is a contact us page that I have been working on. In the GetInTouch.tsx file, I have the following code: <Formik initialValues={{ ...

Utilizing a GLTF asset as the main Scene element in a Three.js project

I'm struggling with incorporating a gltf model as the main scene in Three.js. Specifically, I have a gltf model of an apartment that I want to load from inside and not outside the apartment. I also need the controls to work seamlessly within the apart ...

Employing the Eclipse Palantir TypeScript Plug-in in conjunction with JSPM

I currently utilize the Palantir Eclipse TypeScript Plug-in (v1.8.0.v20160223-1645), which functions flawlessly when my d.ts files are stored in the same source folder /src. However, due to JSPM, these files reside in a different folder now, causing issues ...

Creating a Custom TreeView in VS Code using JSON data

My goal is to create a TreeView using data from a JSON file or REST call, with custom icons for each type of object (Server, Host, and Group). I want to implement configuration.menu similar to the dynamic context menu discussed in this thread. I am relati ...

Escaping double quotes in dynamic string content in Javascript can prevent unexpected identifier errors

Need help with binding the login user's name from a portal to a JavaScript variable. The user's name sometimes contains either single or double quotes. I am facing an issue where my JavaScript code is unable to read strings with double quotes. ...

Troubleshooting problems with local references in an Angular date picker

I am currently working with an Angular date picker component and trying to access its values using a local reference. Unfortunately, when I attempt to console log the local reference, it returns undefined. The datepicker, function, and trigger are provid ...

Adding properties to a class object in Javascript that are integral to the class

Recently, I've been contemplating the feasibility of achieving a certain task in JavaScript. Given my limited experience in the realm of JavaScript, I appreciate your patience as I navigate through this. To illustrate what I am aiming for, here' ...

Encountering an issue while trying to install font-awesome in an Angular project

Encountering an error while trying to install font-awesome in angular npm install --save @fortawesome/fontawesome-free npm ERR! code UNKNOWN npm ERR! syscall rename npm ERR! path C:\Users\pratish.devangan\OneDrive - HCL Technologies Ltd&bso ...

Generate a compressed file in RAM and then save it to Amazon S3

I'm currently working on a project where I need to compress text data into a zip file in memory using TypeScript and then upload it to an AWS S3 bucket. The input data is in plain text CSV format. However, I seem to be encountering an issue where the ...

Implement video.js within an Angular 2 application

I've been attempting to use video.js for my angular2 videos, but I've hit a roadblock. I have included the video.js CDN in my index file. <link href="https://vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet"> <script src="https://v ...

Sharing data across multiple components while navigating in Angular is a common requirement. By passing

I have a specific structure set up in my application: <div class="container"> <top-navbar></top-navbar> <router-outlet></router-outlet> <navbar></navbar> </div> The components I have include Top ...

What is the process for applying cdkDropList to the tbody when using mat-table instead of a traditional HTML table?

I have been experimenting with the mat-table component in my Angular project, following a simple example from the documentation: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- These columns can be ...

TypeScript's type casting will fail if one mandatory interface property is missing while an additional property is present

While running tsc locally on an example file named example.ts, I encountered some unexpected behavior. In particular, when I created the object onePropMissing and omitted the property c which is not optional according to the interface definition, I did not ...