CODEWITHSUNDEEP
angularionic-framework
mafortis
mafortis

Reputation: 7128

Ionic show and hide part of text

I have long text coming from API and I wish to show part of it (possibly 2 lines of it) and allow users to extend the area in order to read full text instead of returning full text in first sight.

Sample

This is what I try to achieve

one

Code

This is my text part code in view

<ion-card-content [innerHTML]="listing.body"></ion-card-content></ion-col>

Any idea?

Upvotes: 1

Views: 1439

Answers (2)

Pankaj Sati
Pankaj Sati

Reputation: 2539

You can toggle the height of your text container when the show more button is clicked. Make Show more button overlap your text container and this way you can achieve the effect you wanted.

Template: 

<div name="main" style="position:relative;display:grid;">
  <p [class]="show?'showText':'hideText'">{{listing.body}}</p>
  <div [class]="show?'showReadMore':'showReadLess'" (click)="displayText()">
    {{show?'Read Less':'Read More'}}
 </div>
</div>

CSS:

.hideText {
  height: 20%;
  overflow: hidden;
}

.showText {
  height: 100%;
  overflow: unset;
}

.showReadMore {
  width: 100%; 
  position: absolute; 
  top: 30%;
}

.showReadLess {
  width: 100%;  
}

Component: Declare variable 

public show: boolean = false;

Create Function

displayText() {
  this.show = !this.show
}

Upvotes: 1

Kevin Jose
Kevin Jose

Reputation: 876

Declare a boolean value:

show: boolean = false;

Declare a method to toggle the value:

displayText() {
  this.show = !this.show
}

Upvotes: 0

Related Questions