Skip to content
Ghost Accordion preview
Rendered from the SwiftUI source on this page.

Ghost Accordion

From syxUI — written for both platforms, not translated between them.

A minimal, borderless accordion - just text and a chevron.

Accordions · SwiftUI · iOS 17

  • accordion
  • swiftui

The actual source

AccGhost.swift
// Ghost Accordion · syxUI · https://syxui.dev/components/acc-ghost
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Ghost / minimal accordion - no card, just rows
struct AccGhost: View {
    @State private var open = 0
    let qs = [("What's included?", "Everything in Pro, plus unlimited exports and team seats."),
                      ("Can I change plans later?", "Yes, upgrade or downgrade anytime from billing.")]
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            ForEach(Array(qs.enumerated()), id: \.offset) { i, q in
                VStack(alignment: .leading, spacing: 8) {
                    HStack {
                        Text(q.0).font(.system(size: 16, weight: .semibold))
                        Spacer()
                        Image(systemName: "chevron.down").font(.system(size: 13, weight: .semibold)).foregroundStyle(.secondary).rotationEffect(.degrees(open == i ? 180 : 0))
                    }.contentShape(Rectangle()).onTapGesture { open = open == i ? -1 : i }
                    if open == i { Text(q.1).font(.system(size: 14)).foregroundStyle(.secondary) }
                }
            }
        }.frame(width: 330)
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17