CODEWITHSUNDEEP
angularionic2
Kirandeep Kaur
Kirandeep Kaur

Reputation: 179

How to expand and contract the height of div on click?

I want to expand and contract the height of div on click the description.I used

onclick="style='height:auto'"

This code expand the div.I want to contract it as well. 

<div style="height: 35px;" onclick="style='height:auto'">

      <p style="color: #9DA4AB;font-size: 15px;" >{{list.TASKDESC}}</p>

      </div>

Current position of the page this is the view of current page where i set the height to 35px.

enter image description here

After i click on div, it expands the div.

enter image description here

Requirement I want to contract it also on the same click on div.

Upvotes: 0

Views: 2066

Answers (2)

99tharun
99tharun

Reputation: 1216

html:

 <div *ngFor="let list of lists;let i=index" (click)="toggleList(i)" [style.height]="isListExpanded(i)?'auto':'35px'">
      <p>{{list.TASKDESC}}</p>
 </div>

ts:

export class ClassName{

 shownList = null;

 toggleList(list) {
     if (this.isListExpanded(list)) {
         this.shownList = null;
     } else {
         this.shownList = list;
     }
  };   

  isListExpanded(list) {
     return this.shownList === list;
  };
}

Upvotes: 1

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

try like below code 

<div class="{{classHeight}}" (click)="onClick()">

      <p style="color: #9DA4AB;font-size: 15px;" >{{list.TASKDESC}}</p>

</div>

make two class 

.small-height{
     height: 35px;
}

.big-height{
     height:auto;
}

when click class change 

public classHeight: String = "small-height";

  onClick(){
       if(this.classHeight == 'small-height')
           this.classHeight='big-height';
       }else{
         this.classHeight='small-height';
       }
   }

Upvotes: 0

Related Questions