[SOLVED] How to hide a div by clicking a button?

ionic-v1
1

I want to hide one div and show another when I click a button.
In this code, I’d like the first div to be hidden at the click (or even destroyed?) and the second div to be shown. Basically I want the user experience of going from page 1 to page 2 in my app.
How do I make this happen?

         <div class="list card">
          <div class="item item-image item item-text-wrap">
              <img src="img/startpage.jpg">
          </div>
      </div>
      <div class="list card">
          <div class="item item-image item item-text-wrap">
              <img src="img/startpage.jpg">
          </div>
      </div>

      <button ng-click="" class="button button-full button-calm button icon-right ion-chevron-right">
          Start now
      </button>

I’ve searched a lot but I’ve mostly just found examples with radio buttons or other more advanced examples…

2

That’s not exactly how you should be handling going from page to page, but if you want to hide divs on click of something, you could try ng-hide.

https://docs.angularjs.org/api/ng/directive/ngHide

So the ng-click=“a_function()” property on the button will fire a function from your controller that will set a_variable_name to be true, and you put ng-hide=“a_variable_name” on the element you want to be hidden when that variable is true.

With more than one div in what is supposed to be read as a sequence, you might want to try a number-counter style approach where the function instead adds 1 to a variable, and instead of using ng-hide you use ng-show=“a_variable_name.step_one” or something.

Still, not the best approach for navigating between pages.

1 Like
3

@jboonzybiz Now you got me curious :smile: What is the best approach for navigating between pages?
(note that this is a very small learning project for me and I won’t have a big or deep structure)

4

Take a look at these short pages

http://ionicframework.com/docs/api/directive/ionNavView/

http://ionicframework.com/docs/api/directive/ionTabs/

and you can install the ionic tabs starter to try tweaking it and learn how it works :slight_smile:

1 Like
5

You might also find cards useful

6

That’s what I was using in my code :smile:

7

Solved it.
It works fine now. I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html.

Here’s solution in index.html

          <div class="list card" id="startCard" ng-show="showstartCard">
          <div class="item item-image item item-text-wrap">
              <!--<img src="img/startpage.jpg">-->
              Card 1
          </div>
      </div>
      <div class="list card" id="secondCard" ng-show="showsecondCard">
          <div class="item item-image item item-text-wrap">
              <!--<img src="img/startpage.jpg">-->
              Card 2
          </div>
      </div>

      <button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
          Start now
      </button>

and here in controllers.js

.controller("StartpageCtrl", function($scope){
    $scope.showstartCard = true;
    $scope.showsecondCard = false;

    $scope.hideCard = function() {
        $scope.showstartCard = false;
        $scope.showsecondCard = true;
    };
});
2 Likes