How to bind a button to show and hide based on click

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.

I would suggest cribbing from @mhartington’s accordion.

1 Like