How to create a button that shows/hides content on press?

Ionic Framework ionic-v3
1

Hello. I’m currently building an Ionic project for college, and since one of the pages contains a lot of text, I wanted to create some sort of button or tab that once pressed, would show the content if it was hidden or would hide them if it was visible.

Something like this:

lorem

Is there any default or external ionic component that suits this example?

2

This is easy…

In your button set a property boolean! For this click set true;

Do you set the property boolean in your code with a *ngIf=“sometingTrue == true”!

For not show!
<ion-content id="acesso-pendente" ion-padding="10" *ngIf="usuarioLiberado == false"> </ion-content>

For show up!
<ion-content id="acesso-pendente" ion-padding="10" *ngIf="usuarioLiberado == true"> </ion-content>

3

I agree with the general thrust of this answer, but a couple of things:

  • There can only be one ion-content element in a component, so if you’re taking the entire ion-content in and out of the DOM, that doesn’t leave anywhere to put the toggle button.

  • If you’re totally in control of usuarioLiberado at all times, this isn’t a huge deal, but JavaScript has lots of pitfalls regarding equality testing and this code falls into two of them: almost always you want to avoid == in favor of ===, and when dealing with booleans don’t compare against anything explicitly at all: prefer *ngIf="usuarioLiberado" or *ngIf="!usuarioLiberado".

4

Okay, using “*ngIf” does hide the content, but how exactly do I setup the boolean property to my button so that it changes to “true” so the content appears?

This is the code for the image above:

  <ion-item (click)="abrirIntro()" color="hl1">
    <ion-text slot="start" style="font-weight: bold">Introdução</ion-text>
    <ion-icon id="iconIntro" name="arrow-dropdown" slot="end"></ion-icon>
  </ion-item>
  <ion-item id="lorem" color="hl2" class="ion-text-center" *ngIf="introVisivel == false">
    <ion-text>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt impedit nisi ipsam nam totam cupiditate numquam perspiciatis aliquam dolorum. Esse sapiente odit ea harum praesentium earum minus voluptatum, inventore ipsum.</ion-text>
  </ion-item>
5

Okay, I managed to come up with a solution that works for me using mostly pure JavaScript.

The button + text combination:

<ion-button strong color="hl1" expand="full" (click)="abrirTutorial()">
    <ion-text class="ion-text-left">Tutorial</ion-text>
    <ion-icon id="tutorialIcon"name="arrow-dropdown" slot="end"></ion-icon>
  </ion-button>

  <ion-text id="tutorial" hidden="true">
    [[TUTORIAL ENTRA AQUI]]
  </ion-text>

And the JavaScript:

 private tutorialHidden: boolean = true;

  abrirTutorial(){

    if(this.tutorialHidden === true){

      this.tutorialHidden = false;
      document.getElementById("tutorial").hidden = false;

    }else if(this.tutorialHidden === false){

      this.tutorialHidden = true;
      document.getElementById("tutorial").hidden = true;

    }

  }
6

A much more idiomatic way to do this with Angular is:

tutorialShown = false;

<ion-content>
    <ion-button expand="full" (click)="tutorialShown = !tutorialShown">
        <span>Tutorial</span>
        <ion-icon id="tutorialIcon" name="arrow-dropdown" slot="end"></ion-icon>
    </ion-button>

    <ion-text id="tutorial" *ngIf="tutorialShown">
        [[TUTORIAL ENTRA AQUI]]
    </ion-text>
</ion-content>
2 Likes
7

THANK YOU!! This helped me and it is such a simple solution. Much appreciated!