onClick Hide ion-grid and show super-tabs on same page in ionic 3

home.html

<!--
  Generated template for the HomePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-grid  *ngIf="!alive">
	
	  <ion-row>
		<ion-col>
		  <div class="container">
			  <h5>Cardio</h5>
			  <div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
				  <span class="sr-only">30% Complete</span>
				</div>
			  </div>
			</div>
		</ion-col>
		<ion-col>
		  <div class="container">
			  <h5>Strenth</h5>
			  <div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
				  <span class="sr-only">40% Complete</span>
				</div>
			  </div>
		  </div>
		</ion-col>
		<ion-col>
		  <div class="container">
			  <h5>Mobility</h5>
			  <div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">
				  <span class="sr-only">20% Complete</span>
				</div>
			  </div>
	      </div>
		</ion-col>
	  </ion-row>
	  
	  <ion-row align-items-center>
		<ion-col>
		  <a (click)="homesliderPage()"><img src="assets/imgs/homemen.png" class="slide-image"/></a>
            <button ion-button (click)="alive = !alive">flip</button>
		</ion-col>
	  </ion-row>
	  
	  <ion-row align-items-center>
		<ion-col>
		<h2>Full Body</h2>
		  <p>Not sure what to do today? The Full Body<br>workout can never go wrong. With no body part<br>untouched, this workout will always leave you<br>with a smile.</p>
		</ion-col>
	  </ion-row>
	  
	  <ion-row>
		<ion-col>
		<div text-left>
		  <h5>12 Exercies</h5>
		  <hr>
		</div>
		</ion-col>
	  </ion-row>
	
	  <ion-row>
		<ion-col>
		  <a (click)="goToTabPages(0)"><img src="assets/imgs/manHome/1-jumping-jacks.png"/></a>
		  <p>Jumping<br>Jacks</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(1)"><img src="assets/imgs/manHome/2-sit-up-.png"/></a>
		  <p>Sit<br>Ups</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(2)"><img src="assets/imgs/manHome/3-pushup.png"/></a>
		  <p>Push<br>Ups</p>
		</ion-col>
	  </ion-row>
	  <ion-row>
		<ion-col>
		  <a (click)="goToTabPages(3)"><img src="assets/imgs/manHome/4-step-up.png"/></a>
		  <p>Step<br>Up</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(4)"><img src="assets/imgs/manHome/5-ankle-.png"/></a>
		  <p>Ankle<br>Bounce</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(5)"><img src="assets/imgs/manHome/6-SideToSideSquats.png"/></a>
		  <p>Side To <br>Side Squats</p>
		</ion-col>
	  </ion-row>
	  <ion-row>
		<ion-col>
		  <a (click)="goToTabPages(6)"><img src="assets/imgs/manHome/7-tricepdips.png"/></a>
		  <p>Tricep<br> Dips</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(7)"><img src="assets/imgs/manHome/8-Arm-Swings.png"/></a>
		  <p>Arm<br>Swings</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(8)"><img src="assets/imgs/manHome/9-BicepsStretch-.png"/></a>
		  <p>Biceps<br>Stretch</p>
		</ion-col>
	  </ion-row>
	  <ion-row>
		<ion-col>
		  <a (click)="goToTabPages(9)"><img src="assets/imgs/manHome/10-lunges.png"/></a>
		  <p>Lunges</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(10)"><img src="assets/imgs/manHome/11-side-plank-rotation.png"/></a>
		  <p>side Plank<br>Rotation</p>
		</ion-col>
		<ion-col>
		  <a (click)="goToTabPages(11)"><img src="assets/imgs/manHome/12-mountainclimbers.png"/></a>
		  <p>Mountain<br>Climbers</p>
		</ion-col>
	  </ion-row>
	  
	  <ion-row align-items-center>
		<ion-col>
		  <hr>
		  <p>Not sure what to do today? The Full Body<br>workout can never go wrong. With no body part<br>untouched, this workout will always leave you<br>with a smile.</p>
		</ion-col>
	  </ion-row>
	</ion-grid>

    <super-tabs id="mainTabs" scrollTabs="true" [ngStyle]="{'display': displayprop}">
      <super-tab [root]="mJumpingjacksRoot" title="Jumping Jac..." icon="jumping" id="tab1"></super-tab>
      <super-tab [root]="mWallsitRoot" title="Sit Up" icon="sit" id="tab2"></super-tab>
      <super-tab [root]="mPushupsRoot" title="Push-Ups" icon="push" id="tab3"></super-tab>
      <super-tab [root]="mStepupsRoot" title="Step-Ups" icon="step" id="tab4"></super-tab>
      <super-tab [root]="mCrunchesRoot" title="Ankle Bounce" icon="ankle" id="tab5"></super-tab>
      <super-tab [root]="mSquatsRoot" title="Squats" icon="Squats" id="tab6"></super-tab>
      <super-tab [root]="mTricepsdipsRoot" title="Triceps Dips" icon="tricep" id="tab7"></super-tab>
      <super-tab [root]="mPlankRoot" title="Arm Swings" icon="Arm" id="tab8"></super-tab>
      <super-tab [root]="mHighkneesRoot" title="Biceps Str..." icon="Biceps" id="tab9"></super-tab>
      <super-tab [root]="mLungesRoot" title="Lunges" icon="lunges" id="tab10"></super-tab>
      <super-tab [root]="mPushupswithrotationRoot" title="Side-Plank Wi.." icon="plank" id="tab11"></super-tab>
      <super-tab [root]="mSideplankRoot" title="Mountain Cl..." icon="mountain" id="tab12"></super-tab>
    </super-tabs>
 
</ion-content>

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ManTabsPage } from'../man-tabs/man-tabs';
import { ManhomesliderPage } from'../manhomeslider/manhomeslider';

import { SuperTabsController } from 'ionic2-super-tabs';

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

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  rootNavCtrl: NavController;
    
  mJumpingjacksRoot = 'MJumpingjacksPage'
  mWallsitRoot = 'MWallsitPage'
  mPushupsRoot = 'MPushupsPage'
  mCrunchesRoot = 'MCrunchesPage'
  mStepupsRoot = 'MStepupsPage'
  mSquatsRoot = 'MSquatsPage'
  mTricepsdipsRoot = 'MTricepsdipsPage'
  mPlankRoot = 'MPlankPage'
  mHighkneesRoot = 'MHighkneesPage'
  mLungesRoot = 'MLungesPage'
  mPushupswithrotationRoot = 'MPushupswithrotationPage'
  mSideplankRoot = 'MSideplankPage'

  constructor(public navCtrl: NavController, public navParams: NavParams, private superTabsCtrl: SuperTabsController) {
    this.rootNavCtrl = this.navParams.get('rootNavCtrl');
  } 

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }
  
  //goToTabPages() {
   // this.navCtrl.push(ManTabsPage);
  //} 
  
  homesliderPage() {
    this.navCtrl.push(ManhomesliderPage);
  }
  
  goToTabPages(page) {
   // this.alive = !this.alive;
  
   this.displayprop = 'block';
    this.superTabsCtrl.slideTo(page);
   
    
  }
  /*goToTabPages(page) {
  this.alive = !this.alive;
    this.superTabsCtrl.slideTo(page);
    }*/
  
  public onButtonClick() {
      this.buttonClicked = !this.buttonClicked;
  }
    
}