I'm struggling to find a clean way to click toggle the display of a side navigation bar while using several of Bootstrap 4's display classes because of their use of !important.
For example, Here's an example div using the display classes I want to toggle the display on.
<div class="module-name d-none d-lg-block sb-collapsable">
{{module_name}}
</div>>
Maybe I'm being really dense right now, but I can't find a clean way to toggle this display because of the fact that both the d-none and d-lg-block classes uses display: none/block !important. The sb-collapsable class is there as a helper to find all the things I want to hide in jQuery. I would really appreciate any help. I've tried a ton of different stuff and searched around for similar problems and haven't come up with anything.
Edit: I should add that not every div using the sb-collapsable class has the same classes on it. Here is another example. I need to toggle visibility of both this and the other div not knowing the state of display before the JS executes, ideally.
<a class="d-block d-lg-none brand bg-dark sb-collapsable" href="#">XXX</a>