How to Collapse a DIV in Blazor without any NuGet Package

Question

Is there any possibility to Show / Hide or Collapse / Toggle a div in Blazor without any NuGet package? I have tried many solutions, but it is not satisfied any of my requirements, I need the exact functionality of Bootstrap Collapse in Blazor Razor.

question from:https://stackoverflow.com/questions/65908613/how-to-collapse-a-div-in-blazor-without-any-nuget-package

Answer 1

You do not need any blazor/c# code for bootstrap collapse to work, it's all done via javascript, see this here: https://blazorfiddle.com/s/culy2nbv

Below code is copied directly from bootstrap documentation

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    ...
  </div>
</div>

If you want to use blazor/c#, check this solution where you can use a flag to show/hide a div content: https://blazorfiddle.com/s/ulpg13ql

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" @onclick="@(() => { IsVisible = !IsVisible; })">
    Link with href
  </a>
</p>
<div class="collapse @(IsVisible ? "show" : "")">
  <div class="card card-body">
    ...
  </div>
</div>

@code {
    protected bool IsVisible { get; set; }
}