3

I want to create a collapsible sidebar that is expanded on lg and higher views, but is collapsed with a (now visible) button to expand on tablet and mobile views (md or smaller).

How would I make my sidebar collapsible on mobile/tablet views? (xs, md, lg) It needs to be expanded in desktop views (lg, xl) and have a toggle button that's hidden in large desktop views, but displays in small mobile/tablet views.

Do I need to write some custom JS?

Linked here are the BS4 Docs for Collapse, but I didn't understand how this would do what I need (https://getbootstrap.com/docs/4.0/components/collapse/#options).

//The 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>
starball
  • 20,030
  • 7
  • 43
  • 238
J-Snor
  • 89
  • 1
  • 6
  • 1
    How come I got voted down for asking a question? I've done research at https://getbootstrap.com/docs/4.0/components/collapse/#collapseoptions and tried to make the question as clear as possible. – J-Snor May 30 '18 at 22:07
  • So far, this first experience with Stackoverflow has been poor. It should be mandatory for a person down-voting to explain why so the person asking the question can improve the question and better themselves. Now I'm just left here scratching my head. – J-Snor May 30 '18 at 22:23
  • You are asking 'how can you do this'. SO is meant for questions like 'I have tried this and it's result is not as expected'. That is why you see lots of comments like 'SO is not a free code writing service'. I didn't downvote BTW. Welcome to SO, it really helped me a lot of times before! – Cagy79 May 30 '18 at 22:37
  • Nice, I appreciate your feedback. What you're saying makes sense! I'm almost there, but am getting some weird behavior. Thanks to your reply, I will edit and restructure my question with that in mind. Thank you! – J-Snor May 30 '18 at 22:53

2 Answers2

2

Well, with some help on other websites I figured out the solution. The guys at the Slack Bootstrap Help Channel were kind enough to point me in the right direction by linking a StackOverflow thread.

Using that link along with the Collapse Documentation at Bootstrap I was able to figure it out. Below is the answer...

// Used jQuery to create the new logic:

  if ($(window).width() < 922) {
    $('#sidebar').collapse({
      toggle: false
    });
  } else {
    $('#sidebar').collapse({
      toggle: true
    });
  }


// Also, needed to add the .collapse class to the UL:

  <ul id="sidebar" class="collapse list-group mb-3">
      ....
  </ul>

I hope this helps others!

J-Snor
  • 89
  • 1
  • 6
0

No need to use JS, use Bootstrap classes: https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

You could do this:

//The Button: The class d-lg-none will hide the filters for large size (ie: it'll be visible on xs-s-md sizes only)

<h4 class="d-lg-none 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 : "d-none d-lg-block" will display the sidebar only on large size

  <ul id="sidebar" class="d-none d-lg-block list-group mb-3">
....
</ul>
Ignacio
  • 9
  • 2
  • Hi Ignacio. I'm also trying to deal with this using bootstrap 4 classes. I've even see a working example [here](https://www.codeply.com/go/XJE8LOdX8k) that is exactly what's discussed here. but I haven't been able to figure out how to make it work. As I see, the point is, when you set the sidebar as hidden for small screens, then the toggle functionality doesn't work. (I suppose it is a style conflict between the 'collapse show' and "d-none" classes but I'm not sure) any clarification will be appreciated – serguitus Apr 02 '20 at 03:41
  • 1
    Instead of using the class "d-none" on sidebar use the class "collapse". The code would be : . I just tested, and it works. You can read the doc related to collapse https://getbootstrap.com/docs/4.3/components/collapse/ – Ignacio Apr 03 '20 at 17:53
  • Hi @Ignacio, thank you for your answer. Your solution is the exact opposite to mine. I get your point but it has a similar issue. I had issues on small screens to show the sidebar, with your suggestion I have issues on hiding sidebar for wide screens. I want to accomplish something similar to the provided link: collapsed on small screens and expanded on bigger ones but in both cases make it possible to hide/show by clicking a button. maybe using custom js is the only way. Any thoughts? Thanks! :) – serguitus Apr 05 '20 at 04:07
  • ok. You need to show the button all the time. right? To show the button on large screen you need to remove the class d-lg-none from the button (this is hidding it) . The code for the button would be

    – Ignacio Apr 06 '20 at 16:09
  • Hi @Ignacio, I'm sorry but I don't understand your answer. I do have the button visible in both screen sizes. my issue is just that if I set ".collapse" class, the sidebar gets hidden on small and large screens. If I set the sidebar classes ".collapse .show" then, the sidebar is visible on both screens. What I want to accomplish would be have to have ".show" class responsively just for long screens and not for small screens. (or the same effect with a different approach) and let the button do the toggle stuff. I'm sorry if I'm not explaining myself correctly. – serguitus Apr 07 '20 at 05:55
  • Hi serguitus. You can rewrite some classes for large screen, try this: @media (min-width: 992px) { .collapse:not(.show) { display: block; } .collapse { display: none; } } – Ignacio Apr 08 '20 at 16:56
  • Doesn't work on toggle button (collapse class) – TomSawyer Dec 11 '20 at 19:51