Tesserae - Accordion

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.

API reference

class

Accordion

public sealed class Accordion : ComponentBase<Accordion, HTMLElement>

A vertically-stacked list of expandable sections, of which one or more may be open at a time.

Namespace: Tesserae
Inheritance: ComponentBase<Accordion, HTMLElement> → Accordion

Constructors

Name	Description
Accordion	Initializes a new instance of this class.

Constructor

Accordion

public Accordion(params Expander[] items)

Initializes a new instance of this class.

Properties

Name	Description
AllowMultiple	Gets or sets whether multiple sections can be expanded at once.

Property

Accordion.AllowMultiple

public bool AllowMultiple { get ; set ; }

Gets or sets whether multiple sections can be expanded at once.

Methods

Name	Description
AddItem	Adds the given item to the component.
AddItems	Adds the given items to the component.
Items	Adds the given items to the component.
AllowMultipleOpen	Allows the multiple open.
Render	Renders the component's root HTML element.

Method

Accordion.AddItem

public Accordion AddItem(Expander item)

Adds the given item to the component.

Method

Accordion.AddItems

public Accordion AddItems(params Expander[] items)

Adds the given items to the component.

Method

Accordion.Items

public Accordion Items(params Expander[] items)

Adds the given items to the component.

Method

Accordion.AllowMultipleOpen

public Accordion AllowMultipleOpen(bool value = true)

Allows the multiple open.

Method

Accordion.Render

public override HTMLElement Render()

Renders the component's root HTML element.

class

Expander

public sealed class Expander : ComponentBase<Expander, HTMLElement>

A single expand / collapse section, with a clickable header that reveals its body content.

Namespace: Tesserae
Inheritance: ComponentBase<Expander, HTMLElement> → Expander

Constructors

Name	Description
Expander	Initializes a new instance of this class.

Constructor

Expander

public Expander(string title = null, IComponent content = null)

Initializes a new instance of this class.

Properties

Name	Description
IsExpanded	Gets or sets whether the expander is expanded.
Title	Gets or sets the title text when no custom header is provided.

Property

Expander.IsExpanded

public bool IsExpanded { get ; set ; }

Gets or sets whether the expander is expanded.

Property

Expander.Title

public string Title { get ; set ; }

Gets or sets the title text when no custom header is provided.

Methods

Name	Description
SetTitle	Sets the title of the component.
SetHeader	Sets the header of the component.
SetContent	Sets the content of the component.
OptionIcon	Configures the option icon on the component.
ChevronRight	Configures the chevron right on the component.
Expanded	Expands the component.
Collapse	Collapses the component.
Expand	Expands the component.
Toggle	Toggles the component's state.
OnToggle	Registers a callback invoked when the toggle event fires.
OnExpand	Registers a callback invoked when the expand event fires.
OnCollapse	Registers a callback invoked when the collapse event fires.
Render	Renders the component's root HTML element.

Method

Expander.SetTitle

public Expander SetTitle(string title)

Sets the title of the component.

Method

Expander.SetHeader

public Expander SetHeader(IComponent header)

Sets the header of the component.

Method

Expander.SetContent

public Expander SetContent(IComponent content)

Sets the content of the component.

Method

Expander.OptionIcon

public Expander OptionIcon(UIcons icon, string color = "", string background = "")

Configures the option icon on the component.

Method

Expander.ChevronRight

public Expander ChevronRight()

Configures the chevron right on the component.

Method

Expander.Expanded

public Expander Expanded(bool value = true)

Expands the component.

Method

Expander.Collapse

public Expander Collapse()

Collapses the component.

Method

Expander.Expand

public Expander Expand()

Expands the component.

Method

Expander.Toggle

public Expander Toggle()

Toggles the component's state.

Method

Expander.OnToggle

public Expander OnToggle(Action<Expander> onToggle)

Registers a callback invoked when the toggle event fires.

Method

Expander.OnExpand

public Expander OnExpand(Action<Expander> onExpand)

Registers a callback invoked when the expand event fires.

Method

Expander.OnCollapse

public Expander OnCollapse(Action<Expander> onCollapse)

Registers a callback invoked when the collapse event fires.

Method

Expander.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Accordion

accordion-sample.cs

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.cs

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.cs

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.cs

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);
        }
    }
}

Accordion

Description

API reference

Constructors

Accordion

Properties

Accordion.AllowMultiple

Methods

Accordion.AddItem

Accordion.AddItems

Accordion.Items

Accordion.AllowMultipleOpen

Accordion.Render

Constructors

Expander

Properties

Expander.IsExpanded

Expander.Title

Methods

Expander.SetTitle

Expander.SetHeader

Expander.SetContent

Expander.OptionIcon

Expander.ChevronRight

Expander.Expanded

Expander.Collapse

Expander.Expand

Expander.Toggle

Expander.OnToggle

Expander.OnExpand

Expander.OnCollapse

Expander.Render

Samples

Basic Accordion

Accordion with Multiple Open Allowed

Standalone Expander

Expander with OptionIcon and ChevronRight

See also