<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Inline Tabs</title>

    <link href="https://code.ionicframework.com/0.9.25/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="HomeCtrl">

    <ion-tabs tabs-type="tabs-icon-top">

      <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ng-if="showHome">
        <ion-header-bar type="bar-positive" title="'Home'"></ion-header-bar>
        <ion-content has-header="true">
          <h2>Home Content</h2>
          <button class="button" ng-click="showHotel = true">Show Hotel</button>
        </ion-content>
      </ion-tab>

      <ion-tab title="Work" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"  ng-if="showWork">
        <ion-header-bar type="bar-positive" title="'Work'"></ion-header-bar>
        <ion-content has-header="true">
          <h2>Work Content</h2>
        </ion-content>
      </ion-tab>

      <ion-tab title="Hotel" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"  ng-if="showHotel">
        <ion-header-bar type="bar-positive" title="'Hotel'"></ion-header-bar>
        <ion-content has-header="true">
          <h2>Hotel Content</h2>
        </ion-content>
      </ion-tab>

    </ion-tabs>

  </body>
</html>
angular.module('ionicApp', ['ionic'])


.controller('HomeCtrl', function($scope) {
  $scope.showHotel = false;
  $scope.showWork = true;
  $scope.showHome = true;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.