I am trying to create a collapsible sidebar that expands on large screens such as lg, but collapses with a visible button for tablet and mobile views (md or smaller).
How can I achieve this responsive behavior for my sidebar on mobile and tablet views? It should also display in expanded form on desktop views like lg and xl. Additionally, there should be a toggle button that is hidden on large desktop views but visible on small mobile and tablet views.
Do I need to implement custom JavaScript functionality for this?
I have referenced the Bootstrap 4 documentation on Collapse, but I am unsure how it can help me achieve the desired outcome (https://getbootstrap.com/docs/4.0/components/collapse/#options).
//Toggle Button
<h4 class="mb-3"><span class="text-muted">Search Filters</span>
<button class="navbar-toggler border"
type="button"
data-toggle="collapse"
data-target="#sidebar"
aria-expanded="false"
aria-label="Toggle filters">
<span><i class="fas fa-filter"></i></span>
</button>
</h4>
//The Sidebar
<ul id="sidebar" class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Header</h6>
<div class="input-group mb-3">
<ul>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
</ul>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Header</h6>
<div class="input-group mb-3">
<ul>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
</ul>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Header</h6>
<div class="input-group mb-3">
<ul>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
</ul>
</div>
</li>
</ul>
</div>