vendor-app/src/app/faq/faq.component.html

<div class="widget-heading-holder">
	<header> Frequently Asked Questions </header>

	<div class="search-input" *ngIf="!selectedCard">
		<input type="text" placeholder="Quick Search">
		<button> <i class="icon ion-md-search"></i> </button>
	</div>

	<button class="back-button round-button" *ngIf="selectedCard" (click)="selectedCard = null">
		<i class="icon ion-md-arrow-back"></i> Back
	</button>
</div>

<div class="container">
	<ul class="topic-list" [ngClass]="{'active' : !selectedCard }">
		<li [ngClass]="{'active' : selectedCard === 1}" (click)="selectedCard = 1">
			<header> General inquiries </header>
			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
		</li>
		<li [ngClass]="{'active' : selectedCard === 2}" (click)="selectedCard = 2">
			<header> Mall App Features </header>
			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
		</li>
	</ul>

	<ul class="topic-detail" [ngClass]="{'active' : selectedCard }">
		<div class="heading">
			<header> General Inquiries </header>
		</div>

		<li *ngFor="let allFaq of allFaqs; let index = index">
			<header> {{allFaq.title}}
				<button (click)="showDetails = !showDetails" [ngClass]="{'active' : showDetails }">
					<i class="icon"
						[ngClass]="{'ion-ios-add-circle-outline': !showDetails , 'ion-ios-remove-circle-outline' : showDetails}"></i>
				</button>
			</header>
			<div class="subquestion">
				<div *ngFor="let question of allFaq.question">
					<h3 *ngIf="showDetails">{{question.sub_question}}</h3>
					<p *ngIf="showDetails">{{question.sub_answer}}</p>
				</div>
			</div>
		</li>

	</ul>
</div>