How to toogle div in ionic3

Question

I want to display a long text. but for better user experience, the long text will be displayed partly with an 'expand' button. When the user clicks on the 'expand' button, the full text will be expanded.

the user interface design:

default:

after expand:

Thank you in advance!

Answer 1

Just add a click event onto the button, using (click)="callback()" When it's clicked, inside of the callback method, toggle a class property between true/false.

public expanded = false;

callback() {
  this.expanded = !this.expanded;
}

On your div that you want to toggle, toggle a class:

<div [ngClass]="{'expanded': expanded}"></div>

This will add the class 'expanded' when the class property 'expanded' is true. Then add appropriate CSS styling to change the height based on what you want it to look like.

So clicking the button will now toggle the class property expanded between true and false, which in turn will toggle the css class on the div.

Answer 2

You can use ngClass to toggle a class like unexpand and this class set the height of the div

style

.unexpand {
  height:100px; 
  overflow: hidden;
 }

template

<div [ngClass]="{unexpand:isUnexpand}" >
 ...
</div>

<button (click)="isUnexpand = !isUnexpand">
  {{isUnexpand ? 'Expand' :'Unexpand'}}
 </button>

compoenent

  isUnexpand:boolean=false

stackblitz demo