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:


<ion-list no-lines>
  <button ion-item (click)="itemClicked()">
     <h2>About {{}}</h2>
      <ion-icon name="ios-arrow-down" item-right></ion-icon>
   <div [style.visibility]= "toggoleShowHide">
     <p dir="auto" >


    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