Ionic 4 Expandable Accordion

Ionic Framework
1

Please help me, all I want to do is create a simple accordion in ionic 4. Everytime I create something in a ion-list everything is in one line can someone help if I am missing something?
My html:

<ion-list class="product-types">

    <ion-list-header>
      <ion-label>Choose a Product Category</ion-label>
    </ion-list-header>

    <ion-item (click)="ExpandItem(p.Id)" *ngFor="let p of ProductTypes" margin-bottom>

      <ion-thumbnail start>
          <img [src]="this.auth.APIUrl + '' + p.LogoUrl" />
      </ion-thumbnail>

      <h2>My Neighbor Totoro</h2>
      <p>Hayao Miyazaki • 1988</p>

      <div id="expandWrapper" class="expand-wrapper" [class.collapsed]="!p.Expanded">
          Hello people
      </div>

      <ion-button clear end>View</ion-button>

    </ion-item>

  </ion-list>

Everything goes on one line like this:

image
image.png800×392 38 KB

All the examples I’ve followed online have similar html layout but their lists look different from my ugly ugly one… Please help me… I’ve also noticed that even if I’ve set my .expand-wrapper div to height: 0; as you can see the content is visible either way! Check my css:

.expand-wrapper {
  height: 0;
  transition: 0.2s linear;
}  

.collapsed {
  height: 0 !important;
}
2

Hello,

I have not done any look, why it is not working as expected, but maybe here are some inspirations to do it with css https://freefrontend.com/css-accordions/ or https://www.hongkiat.com/blog/css-only-accordion/ or… or use a ui framework that has an accordion.

Best regards, anna-liebr

3

I don’t think that’s really helpful, isn’t there some Ionic 4 geniuses on this Ionic forum that could help please…?

4

Hello,

it seems that ion-item makes some things inline. Insert a Div for example

<ion-item (click)="ExpandItem(p.Id)" *ngFor="let p of ProductTypes" margin-bottom>
<div>
whatever

For beautiful working css accordions look the links.

Best regards, anna-liebt

5

Ok what I can see is that other people are using ion-button with ion-item attribute but I can see there’s no ion-item css/styling applied:

<ion-button ion-item></ion-button>

Same thing happens if I use ion-item and apply a ion-button / button attribute, no css rule is applied, meaning that my application might be missing css files or something though I cannot figure out what files those are. Any clue anyone?

6

Ok I figured above problem… You’ve to use ionic-label like so:

<ion-list class="product-types">

    <ion-list-header>
      <ion-label>Choose a Product Category</ion-label>
    </ion-list-header>

    <ion-item (click)="ExpandItem(p.Id)" *ngFor="let p of ProductTypes" margin-bottom>

      <img start [src]="this.auth.APIUrl + '' + p.LogoUrl" />

      <ion-label>

          <h2>My Neighbor Totoro</h2>
          <h3>Hayao Miyazaki • 1988</h3>
          <p id="expandWrapper" class="expand-wrapper" [class.collapsed]="!p.Expanded">
             Hello people
          </p>

      </ion-label>

    </ion-item>

  </ion-list>
1 Like