Accordions
Basic Accordion
<MudExpansionPanels>
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Always Open Accordion
<MudExpansionPanels MultiExpansion="true">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Flush Accordion
<MudExpansionPanels>
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Light Colors:
Primary
<MudExpansionPanels Class="accordion-light-primary">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Secondary
<MudExpansionPanels Class="accordion-light-secondary">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Solid Colors:
Primary
<MudExpansionPanels Class="accordion-solid-primary">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" Class="mt-2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Secondary
<MudExpansionPanels Class="accordion-solid-secondary">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" Class="mt-2" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Colored Borders:
Primary
<MudExpansionPanels Class="accordion-solid-primary-border accordions-items-seperate">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" class="border-b">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500" class="border-b">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Secondary
<MudExpansionPanels Class="accordion-solid-secondary-border accordions-items-seperate">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" class="border-b">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500" class="border-b">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Left Aligned Icons
<MudExpansionPanels Class="panel-left accordions-items-seperate">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" class="border-b" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500" class="border-b">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" MaxHeight="1000" class="border-b">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Without Icon
<MudExpansionPanels class="accordions-items-seperate">
<MudExpansionPanel Text="Accordion Item #1" MaxHeight="150" HideIcon="true" class="border-b" Expanded="true">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" MaxHeight="500" HideIcon="true" class="border-b">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" class="border-b" MaxHeight="1000" HideIcon="true">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Custom Icon Panels
<MudExpansionPanels class="custom-icon-accordion accordions-items-seperate">
<MudExpansionPanel HideIcon="true" Class="border-b">
<TitleContent>
<div class="d-flex">
<MudText>Accordion Item #1</MudText>
<MudIcon Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>" class="ms-auto"></MudIcon>
</div>
</TitleContent>
<ChildContent>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</ChildContent>
</MudExpansionPanel>
<MudExpansionPanel HideIcon="true" Class="border-b">
<TitleContent>
<div class="d-flex">
<MudText>Accordion Item #2</MudText>
<MudIcon Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>" class="ms-auto"></MudIcon>
</div>
</TitleContent>
<ChildContent>
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</ChildContent>
</MudExpansionPanel>
<MudExpansionPanel HideIcon="true" Class="border-b">
<TitleContent>
<div class="d-flex">
<MudText>Accordion Item #3</MudText>
<MudIcon Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>" class="ms-auto"></MudIcon>
</div>
</TitleContent>
<ChildContent>
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</ChildContent>
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Custom Panels
<MudExpansionPanels Class="customized-panel accordions-items-seperate">
<MudExpansionPanel Text="Accordion Item #1" Class="custom-panel-primary border-b" MaxHeight="150">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #2" Class="custom-panel-secondary border-b" MaxHeight="500">
<strong>This is the second item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
<MudExpansionPanel Text="Accordion Item #3" Class="custom-panel-error border-b" MaxHeight="1000">
<strong>This is the third item's accordion body.</strong> It is hidden
by
default, until the collapse plugin adds the appropriate classes that we
use
to
style each element. These classes control the overall appearance, as
well as
the
showing and hiding via CSS transitions. You can modify any of this with
custom
CSS or overriding our default variables. It's also worth noting that
just
about
any HTML can go within the <code>.accordion-body</code>, though the
transition
does limit overflow.
</MudExpansionPanel>
</MudExpansionPanels>
@code {
}
Horizontal Collapse
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<MudStack Spacing="2">
<MudButton OnClick="()=>{OnExpandCollapseClick(ref _expanded1);}" Color="Color.Primary" Variant="Variant.Filled">Expand</MudButton>
<MudDivider />
<MudCollapse Expanded="False">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</MudCollapse>
</MudStack>
@code {
}