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;
}
}