Hello Kelly,

I expect that it should be able to collapse the content, and that any content should work (that's the Blazor way - templates are RenderFragments and can nest components). So, I moved your Vote for the panelbar, you can Follow its implementation if you like.

With that said, I am closing this item as a duplicate of the panelbar, for anyone looking for similar functionality - Vote for and Follow the Panelbar component implementation (https://feedback.telerik.com/blazor/1435753-accordion-style-expander-panelbar) or also see my samples here.

For something more specific you can start with my previous sample of using the animation container, but note that it is absolutely positioned, so it does not go into the static flow of the content. If static positioning is a must, you can toggle the visibility of any regular panel on any click of any element.

Here's a pretty basic sample of making an inline alert (of course, needs some better styling and refactoring to serve as a reusable component, but I trust it illustrates the point):

<style>
    .hidden {
        display: none;
    }

    .my-collapsible-panel {
        min-height: 3em;
    }
    .top-right-icon {
        float: right;
    }
</style>

    <div class="alert alert-dark my-collapsible-panel" role="alert">
        <div class="top-right-icon" @onclick="@( () => PanelVisible = !PanelVisible )">
          <TelerikIcon Icon="@( PanelVisible ? IconName.ArrowChevronUp : IconName.ArrowChevronDown )" />
        </div>
        <div class="@( PanelVisible ? "" : "hidden" )">
            A simple dark alert—check it out!
            <div style="height: 300px;background:yellow">more content</div>
        </div>
    </div>

@code{ 
    bool PanelVisible { get; set; }
}

Regards,
Marin Bratanov
Progress Telerik

Hello Kelly,

Would a panelbar suit your needs (something like this https://demos.telerik.com/aspnet-core/panelbar/index)? If so, please Vote for and Follow its implementation here: https://feedback.telerik.com/blazor/1435753-accordion-style-expander-panelbar

I am asking for this to ensure that we keep only one copy of each request so everything is easy to track.

At the moment, you could make a component to achieve similar behavior through the AnimationContainer component we provide, here's a basic example of the functionality so you can tweak it further (and, of course, expose as a stanadalone component in your app, and implement templates and so on)

<div style="position: relative; width: 400px; border: 1px solid red;">
    <div>
        <h6>Title goes here</h6>
        <span style="position: absolute; top: 0; right: 0">
            <TelerikButton Icon="@( Expanded ? IconName.ArrowChevronUp : IconName.ArrowChevronDown )"
                           OnClick="@ExpandCollapse" />
        </span>
    </div>
    <TelerikAnimationContainer @ref="@AnimContainer" Width="100%" Height="100px" Class="k-popup">
        lorem ipsum dolor sit amet
    </TelerikAnimationContainer>
</div>

@code {
    TelerikAnimationContainer AnimContainer { get; set; }
    bool Expanded { get; set; }

    async void ExpandCollapse()
    {
        await AnimContainer.ToggleAsync();
        Expanded = !Expanded;
    }
}

Regards,
Marin Bratanov
Progress Telerik