Search code examples
csstwitter-bootstraptogglehidden

By using Bootstrap 4, how to toggle a div whose parent div is hidden under the certain resolution?

When it's on the large screen, I have a navigation div which contains another five sub divs serving as five different navigation sections, like

enter image description here

I gave the navigation div class="d-none d-lg-block" so that this whole thing will only show at large screen and above and hide when it's smaller than the large screen.

However, on the smaller screens, I have created another div that contains some buttons which I hope they could toggle those navigation sections, like

enter image description here

when I click on Div1, I want the content Item1 and Item2 in Div1 to be toggled.

But just giving the section an id="div1" and class="navbar-toggler", data-toggle="collapse" and data-target="#div1" wouldn't make this happen. I also tried giving the div display: block when it's at a smaller resolution to no avail.

I have a fiddle here: https://jsfiddle.net/chenhang91/u8b9cwmw/

What could be a good way to solve this problem elegantly?

Thanks!

Solution

  • In the provided code it's not possible to show a menu in a parent, which is hidden explicitly with a class .container.d-none.d-lg-block.

    I suggest you restructure the whole html:

    1. there's no need for extra submenu toggle divs .small-screen-div at all, toggling for submenus can be assigned to .nav-block-title. hence we move d-none.d-lg-block classes to the submenu themselves (changing d-lg-block to d-lg-inline-block accordingly)

      <div class="nav-block-section">
  <div class="nav-block-title d-inline-block ml-0"><a data-toggle="collapse" href="#div3">Div3</a></div>
  <div class="collapse nav-block-navs d-none d-lg-inline-block" id="div3">
<div class="pb-2">
  <a href="#">Item1</a>
  <a href="#">Item2</a>
  <a href="#">Item3</a>
  <a href="#">Item4</a>
</div>
<div>
  <a href="#">Item1</a>
  <a href="#">Item2</a>
  <a href="#">Item3</a>
  <a href="#">Item4</a>
</div>

    2. in this case data-toggle="collapse" need a small adjustment in css, to allow display switching no matter what media query is now. 

       @media (max-width:991px) {
 .nav-block-navs.collapse.show {
   display:inline-block !important;
  }
}

    Example