Tesserae

Accordion

Description

A collapsible content component

An accordion contains a list of expanders that can be toggled to reveal more information. They are useful for organizing content into manageable chunks and reducing vertical space usage when not all information needs to be visible at once.

Tesserae's Accordion component manages multiple Expanders, allowing you to control whether one or multiple sections can be open at the same time.

Samples

Basic Accordion

accordion-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var accordion = Accordion(
                Expander("Getting started", TextBlock("Use expanders to reveal details in place without navigating away.")).Expanded(),
                Expander("Configuration", Stack().Children(
                    TextBlock("You can nest any component inside an expander."),
                    Button("Primary action").Primary())),
                Expander("Advanced", TextBlock("Combine with Card for complex layouts."))
            ).AllowMultipleOpen(false);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(accordion);
        }
    }
}

Accordion with Multiple Open Allowed

accordion-multiple-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var accordion = Accordion(
                Expander("Section 1", TextBlock("Multiple sections can be open simultaneously here.")),
                Expander("Section 2", TextBlock("This is useful for comparing information between sections.")),
                Expander("Section 3", TextBlock("Just set .AllowMultipleOpen(true) on the accordion."))
            ).AllowMultipleOpen(true);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(accordion);
        }
    }
}

Standalone Expander

accordion-expander-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var expander = Expander("What is Tesserae?", TextBlock("Tesserae provides a fluent API for building UI components.")).Expanded();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(expander);
        }
    }
}

Expander with OptionIcon and ChevronRight

accordion-icons-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var accordion = Accordion(
                Expander("What does indexing do?", TextBlock("Indexing reads each document, extracts structured text, and stores it in a vector + keyword index so queries match in milliseconds.")).OptionIcon(UIcons.Info, Theme.Colors.Blue600, Theme.Colors.Blue100).ChevronRight().Expanded(),
                Expander("Where are my files stored?", TextBlock("")).OptionIcon(UIcons.Check, Theme.Colors.Green600, Theme.Colors.Green100).ChevronRight(),
                Expander("Why did my last build fail?", TextBlock("")).OptionIcon(UIcons.Exclamation, Theme.Colors.Orange600, Theme.Colors.Orange100).ChevronRight(),
                Expander("How do I rotate the IMAP token?", TextBlock("")).OptionIcon(UIcons.TriangleWarning, Theme.Colors.Red600, Theme.Colors.Red100).ChevronRight(),
                Expander("Can I use a custom embedding model?", TextBlock("")).OptionIcon(UIcons.Settings, Theme.Colors.Blue600, Theme.Colors.Blue100).ChevronRight()
            ).AllowMultipleOpen(false);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(accordion);
        }
    }
}