Hi , I have a list of headers (titles) and each has paragraphs… I created a list for this so that it has a button with icon on the right. when the button is clicked , show the paragraph and when clicked again it should hide it back.
on the first click its shown but I don’t know how to hide it back when its clicked again.
so far I have done something like this:
.html
<ion-list no-lines>
<button ion-item (click)="itemClicked()">
<h2>About {{details.company.data.company_name_en}}</h2>
<ion-icon name="ios-arrow-down" item-right></ion-icon>
</button>
<div [style.visibility]= "toggoleShowHide">
<p dir="auto" >
{{details.company_profile}}
</p>
</div>
</ion-list>
.ts
itemClicked(){
this.toggoleShowHide= 'visible';
}
Also , the space for the <div>
tags are also not hidden…And if someone can please suggest how to animate this properly… when clicked the list should expand with the content inside , and then contract when clicked again.