CODEWITHSUNDEEP
javascriptcssflexbox
Lee Saxon
Lee Saxon

Reputation: 457

Flexbox child : any way to reset "display: none"?

Typically I set lengthy menus on my mobile site to an initial display: none and use a Javascript "Expand" button to switch them back to display: flex (or whatever).

But this time around, I can't hide the flex parent. I have to hide only certain flex children, because certain others must be visible. But without a display: flex-child to switch back to...

Is there a solution?

Upvotes: 3

Views: 2544

Answers (1)

Oriol
Oriol

Reputation: 288660

Flex items are flex items not because they have some special display value, but because they are children of a flex container. The display value is almost irrelevant since it will be blockified anyways.

So you can just toggle between display: none and display: block, for example.

But also consider collapsing:

Specifying visibility: collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility: collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable.

Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble".

ul, ul > li {
  display: inline-flex;
  flex-flow: column;
}
ul > li {
  border: 1px solid;
}
ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}
<ul>
  <li id="nav-about"><a href="#nav-about">About</a>
  <li id="nav-projects"><a href="#nav-projects">Projects</a>
    <ul>
      <li>Art</li>
      <li>Architecture</li>
      <li>Music</li>
    </ul>
  <li id="nav-interact"><a href="#nav-interact">Interact</a>
</ul>
<p>Hover over the menu above: each section expands to show its sub-items. In order to keep the menu width stable, <code>visibility: collapse</code> is used instead of <code>display: none</code>. This results in a sidebar that is always wide enough for the word “Architecture”, even though it is not always visible.</p>

Upvotes: 4

Related Questions