Accordion

A flat disclosure row that shows or hides content under a title. For questions and answers, use FAQ.

A postpaid plan with rollover data and Smiles rewards.

import SwiftUI
import EandTokens

// Accordion (page not finalised in V1.2): title/sm row, 12pt vertical padding, a 1pt
// divider in border/surface-based/raised. For a list of questions, use FAQ.
struct Accordion<Content: View>: View {
  let title: String; @State private var open = false
  @ViewBuilder var content: Content
  var body: some View {
    VStack(alignment: .leading) {
      Button { withAnimation { open.toggle() } } label: {
        HStack {
          Text(title).font(.system(size: EandTypography.titleSm.size, weight: .semibold))
          Spacer()
          Image(systemName: "chevron.down").rotationEffect(.degrees(open ? 180 : 0))
        }
      }.padding(.vertical, EandSpacing.md)
      if open { content.padding(.bottom, EandSpacing.md) }
    }
    .overlay(Rectangle().frame(height: EandBorder.sm)
      .foregroundColor(EandColor.borderSurfaceBasedRaisedDefault), alignment: .bottom)
  }
}

Not finalised in Figma

The Accordion page in Figma DSL V1.2 is marked [Not Finalized], so this component is unchanged from V1.1. The V1.2 question-and-answer pattern is FAQ: white accordion cards, an optional category chip row, one item open at a time.

When to use

Use for a single show-and-hide group inside a form or a detail page, where a flat row with a divider suits the layout.
Don't use for a list of questions and answers; that is FAQ. Not for navigation (use ActionBar) or for content the user always needs to see.

Anatomy

Header — a full-width button with the title in title/sm and a 16px chevron-down-sm that turns 180° when the row opens. It sets aria-expanded.
Content — children, rendered only while open, with 12px below.
Divider — a 1px bottom border in border/surface-based/raised/default.

The row manages its own state; defaultOpen sets the initial state.

Props

Prop	Type	Default	Description
`defaultOpen?`	`boolean`	`false`
`title?`	`ReactNode`	—

Design

Figma source: Accordion — etisalat Consumer App DSL V1.2 (Not Finalized)

Header padding 12 top and bottom (spacing/md), gap 12 between the title and the chevron.
Neither the page's V1.0 Accordion header nor its card exploration is a final spec. The exploration's card style is what FAQ uses.

When to use

Anatomy

Props

Design

On this page