How to create an Accordion List with Ionic 4?

This is not an included component within Ionic 4 but it's not a hard problem to solve.

You can use Angular Material's expansion panel if you want to use an off the shelf component.

If you just want a quick overview it would be something like this:

1. Generate a component
2. Set a standard height for the panels expansion (annoying but its a limitation of CSS itself so you have to do this)
3. Use css to handle the hiding or expanding + animation
4. Use a snippet of code to toggle the expanded state
5. Depending on the type of accordion (allow one open or many open at a time) you might also want to write another snippet of code to collapse all other panels when a new one is opened.

Bonus considerations for deep linking support:

1. Update the #fragment in the url when each panel is opened
2. Check for a matching #fragment on page load and expand it

Josh has a tutorial on it - Creating an Accordion List in Ionic.

There is also a detailed tutorial over on Mastering Ionic.

Here I am using flag. After click on the image the next panel will open. Which is [hidden] first time.For multiple clicking on the image I am using flag in .ts file. This is helpful for static list.

.html file
    
    <img style="width:14px; height:14px;" src="assets/down_arrow.png" (click)="accordion()">
    <ion-row [hidden]="panel" class="panel">
    <div id="line"></div>
     <ion-text style="padding-left:7px; padding-right:7px; font-size:11px;">>Description</ion-text>
     </ion-row>
  
.ts file
    panel = 1;
    flag = 0;
    accordion(){
         if(this.flag == 0){
          this.panel++;
          this.flag = 1;
         }
         else if(this.flag == 1){
          this.panel--;
          this.flag = 0;
         }
         
         console.log(this.panel);
       }