Hide show

HTML

<ion-header>
  <ion-navbar>
    <ion-toolbar>
      <ion-title>Dashboard</ion-title>
      <button ion-button menuToggle>
        <ion-icon name="ios-menu-outline">
        </ion-icon>
      </button>
    </ion-toolbar>

   
  </ion-navbar>
  <img style="height: 159px; width: 100%;" src="./assets/imgs/a.jpg" alt="">
</ion-header>
<ion-content>
<ion-card>
  <div class="title-heading">
    <h2 class="has-line-center">Frequently Asked Questions</h2>
  </div>
  <ion-list>
    <ion-item>
     <p>  Q:  Is it web based only ?</p>
      <button ion-button clear item-end icon-left *ngIf="!isOn" (click)="toggleON()">
        <ion-icon name="ios-arrow-dropdown-outline"></ion-icon>
      </button>
      <button ion-button clear item-end icon-left *ngIf="isOn" (click)="toggleON()">
        <ion-icon name="ios-arrow-dropup-outline"></ion-icon>
      </button>
    </ion-item>

    <div *ngIf="isOn"> 
      <p class="andwer-description">
         Web is just one portal. A wallet is enough. Whitelabel access of any sort is possible.
      </p>
    </div>
  </ion-list>
    <ion-list>
      <ion-item>
        <p> Q: Is CoTrader a platform or a protocol?</p>
        <button ion-button clear item-end icon-left *ngIf="!issOn" (click)="toggleOn()">
          <ion-icon name="ios-arrow-dropdown-outline"></ion-icon>
        </button>
        <button ion-button clear item-end icon-left *ngIf="issOn" (click)="toggleOn()">
          <ion-icon name="ios-arrow-dropup-outline"></ion-icon>
        </button>
      </ion-item>
   
      <div *ngIf="issOn">
        <p class="andwer-description">
           CoTrader is both a platform and a protocol: Besides the zk-STARKs ledger tech protocol later in the roadmap, the CoTrader
          core features are achieved via a protocol in a way similar to how 0x is a protocol. Any underlying DEX can be substituted
          for another, for price/performance/liquidity reasons, similarly to how relays can be substituted in 0x.
        </p>
      </div>
    </ion-list>
</ion-card>




</ion-content>




SCSS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the FaqsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-faqs',
  templateUrl: 'faqs.html',
})
export class FaqsPage {

  isShowDetail:any;
 
  constructor(public navCtrl: NavController, public navParams: NavParams) {
 
  }
  private isOn: boolean = false;
  private issOn: boolean = false;

  getButtonText(): string {
    return `Switch ${this.isOn ? 'Off' : 'On'}`;

  }
  setState(): void {
    this.isOn = !this.isOn;
  }

  toggleDetails() {
    this.isOn = !this.isOn;
  }
  toggleON() {
    this.isOn = !this.isOn;
  }
  toggleOn() {
    this.issOn = !this.issOn;
  }


}