Bootstrap 4 card within a single page application

Question

I have a Blazor server side single page application. Within one of its components, I have a simple bootstrap 4 collapsible panel:

                    <a href="#demo" data-toggle="collapse">Collapsible</a>

                    <div id="demo" class="collapse">
                        Lorem ipsum dolor text....
                    </div>

When the user clicks the link, instead of collapsing (or opening) the panel, the whole app is refreshed, as the url from https://localhost:44333/mycurrentcomponent becomes https://localhost:44333/#demo.

How can I make the collapsible panel work properly?

Answer 1

I'd just skip the Bootstrap mechanics, which presumably include Javascript which is not set up for use in Blazor.

It's trivial to do this kind of thing in Blazor:

<a @onclick="()=> IsCollapsed = !IsCollapsed" style="text-decoration:underline;color:navy;cursor:pointer">Collapsible</a>

@if (!IsCollapsed)
{
    <div id="demo">
        Lorem ipsum dolor text....
    </div>
}

@code {
    bool IsCollapsed;
}