CODEWITHSUNDEEP
cssflexbox
John Ohara
John Ohara

Reputation: 2901

Hide flexbox child and make visible again

I have a simple flexbox scenario - parent, few items etc.

I need to selectively hide one of the child items, which I do using display: none.

However, at a later point, I need to reinstate the item visibility - but as what? I It's not a flex, and I don't think it's an inline-flex, so what is it?

I can't use display: unset as it only seems to be moderately supported. Any ideas? 

.container {
  margin: 40px;
}

.flexbox-container {
  display: flex;
}

.flexbox-item {
  flex: 1 0 0;
  height: 40px;
  background-color: aqua;
}

.flexbox-item:not(:first-child) {
  margin-left: 20px;
}

.hide-item {
  display: none;
}
<div class="container">
  <div class="flexbox-container">
    <div class="flexbox-item">child</div>
    <div class="flexbox-item hide-item">child</div>
    <div class="flexbox-item">child</div>
  </div>
</div>

Upvotes: 1

Views: 5621

Answers (2)

Rounin
Rounin

Reputation: 29511

.flexbox-container has display: flex.

So all the child elements of .flexbox-container are flex-children.

If you add .hide-item to one of those child elements, that element now has display: none.

If you remove .hide-item from that child element it goes back to being a flex-child again.

Example:

const hiddenChild = document.querySelector('.hide-item');

hiddenChild.classList.remove('hide-item');

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115342

Just reset it back to display:block

.container {
  margin: 40px;
}

.flexbox-container {
  display: flex;
}

.flexbox-item {
  flex: 1 0 0;
  height: 40px;
  background-color: aqua;
}

.flexbox-item:not(:first-child) {
  margin-left: 20px;
}

input:checked+.flexbox-container>.hide-item {
  display: block;
}

.hide-item {
  display: none;
}
<div class="container">
  <label>Toggle This</label>
  <input type="checkbox">
  <div class="flexbox-container">
    <div class="flexbox-item">child</div>
    <div class="flexbox-item hide-item">child</div>
    <div class="flexbox-item">child</div>
  </div>
</div>

Upvotes: 4

Related Questions