title: How to use Bootstrap Collapse in Blazor app
body: <p>I am just trying to create a small prototype application in Visual Studio using .Net 5/Blazor server app,  where I need to have Bootstrap collapse functionality in a Blazor component - this would contain a separate Blazor component when expanded.</p>
  <p>I am trying to avoid where possible to use JavaScript or jQuery in the prototype as much as possible. However, I can see that in some cases such as Bootstrap Collapse I may need to do this. I would like to have code local to the component if possible, but ok to having a .js file containing common helper functions if needed.</p>
  <p>The code below gives an example with some ideas on how I might do this - does anyone have any ideas on how to get this to work.</p>
  <pre><code>    &lt;div class=&quot;btn btn-primary&quot; @onclick=&quot;ViewDetails&quot; data-toggle=&quot;collapse&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;details&quot;&gt;
              this is some text for a button
          &lt;/div&gt;
          &lt;div class=&quot;collapse&quot; id=&quot;details&quot;&gt;
              this is the details screen for this record
          &lt;/div&gt;
      
      @code {
       private async void ViewDetails()
          {
              // Button click indicates an event so should be able to get redraw to occur.  
      
              // Some mechanism to change the toggle state without calling javascript (dhtml style)
              // Use a boolean to change the ARIA state or something like that
              _viewDetails = (_viewDetails == false) ? true : false;
              this.StateHasChanged();
              
              // Or, call inline jquery to toggle control (preferred) something like.
              await _JSRuntime.InvokeVoidAsync(&quot;$('#details).collapse('toggle');&quot;, &quot;&quot;);
          }
      }
  </code></pre>