Accordions

Accordions are a bit like disclosure groups: users see a group of headings, and can click on one to expand it, revealing its contents.

This creates a simple accordion:

Accordion {
    Item("First item") {
        Text("This is the first accordion item.")
    }

    Item("Second item") {
        Text("This is the second accordion item.")
    }

    Item("Third item") {
        Text("This is the third accordion item.")
    }
}
.openMode(.individual)
.margin(.bottom, .extraLarge)

This accordion is set to allow multiple items to be open at a time:

Accordion {
    Item("First") {
        Text("This is the first accordion item.")
    }

    Item("Second") {
        Text("This is the second accordion item.")
    }

    Item("Third") {
        Text("This is the third accordion item.")
    }
}
.openMode(.all)

You can configure individual items to be openy by default if you want:

Accordion {
    Item("First", startsOpen: true) {
        Text("This item will start open by default.")
    }

    Item("Second") {
        Text("This is the second accordion item.")
    }

    Item("Third") {
        Text("This is the third accordion item.")
    }
}
.openMode(.individual)

And you can add more complex elements and styling to your accordion titles and contents if you want:

Accordion {
    Item(Emphasis { "This title is italic" }, startsOpen: true) {
        Text {
            Image("/images/photos/chair.jpg", description: "This is a picture of a chair, and not a dog.")
                .resizable()
        }

        Text("This is the first accordion item.")
    }

    Item(Underline { "This title is underlined." }) {
        Text("This is the second accordion item.")
    }

    Item(Strong { "This title is bold." }) {
        Text("This is the third accordion item.")
    }
}
.openMode(.individual)

Created with Ignite