Ionic v6 Ion-accordion open first item by default

user_11797105 0
Viewed 1263

We upgraded our app from v5 to v6, we have a page where we are displaying expandable items and we thought we would make use of the newly introduced ion-accordion, the problem is on page load all the items are collapsed, I want the first item expanded while all the other items are closed. Are there any attributes I can set on ion-accordion to achieve this?

ionic6 ionic-framework
2 Answers

After going through the official documentation I just found that you can have an item expanded by default using the value attribute on ion-accordion-group tag.

<ion-accordion-group value="colors">
  <ion-accordion value="colors">
    <ion-item slot="header">
      <ion-label>Colors</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Red</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Green</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Blue</ion-label>
      </ion-item>
    </ion-list>
  </ion-accordion>
</ion-accordion-group>

Note the value in ion-accordion is equal to that in ion-accordion-group.

user_117971050

if you set the value for with the name of the accordion the default will be the mentioned accordion Expanded

<!-- Multiple Accordions -->
<ion-accordion-group [multiple]="true" [value]="['colors', 'numbers']">
  <ion-accordion value="colors">
    <ion-item slot="header">
      <ion-label>Colors</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Red</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Green</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Blue</ion-label>
      </ion-item>
    </ion-list>
  </ion-accordion>
  <ion-accordion value="numbers">
    <ion-item slot="header">
      <ion-label>Numbers</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>one</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>two</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>three</ion-label>
      </ion-item>
    </ion-list>
  </ion-accordion>
  
</ion-accordion-group>

in this case Accordion "Colors" and "Numbers" are Expanded. if you want only the first one delete numbers from [value]="['colors', 'numbers']"

user_143843340
Related