HTML DIV should be hidden but the position not change the existing div-CodePudding

I want to hide 1, 3 and 2 & 4 not change their position.

div{
  width: 10%;
  float: left;
}

<div style="background-color: blue"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>

CodePudding user response：

visibility hidden will keep the space of the element but not show it:

div {
  width: 10%;
  float: left;
}

div:nth-child(1),
div:nth-child(3) {
  visibility: hidden;
}

<div style="background-color: blue">
  <p>1</p>
</div>
<div style="background-color: yellow">
  <p>2</p>
</div>
<div style="background-color: red">
  <p>3</p>
</div>
<div style="background-color: green">
  <p>4</p>
</div>

CodePudding user response：

visibility hidden only for hiding the element here but element position will left as blank so you can see white spaces rather than element. it is advisable to use class or id to get accurate result

    div {
      width: 10%;
      float: left;
    }
.blue{
visibility:hidden;
}
.red{
visibility:hidden;
}

<div  style="background-color: blue">
  <p>1</p>
</div>
<div  style="background-color: yellow">
  <p>2</p>
</div>
<div  style="background-color: red">
  <p>3</p>
</div>
<div  style="background-color: green">
  <p>4</p>
</div>

CodePudding user response：

You could set their opacity to 0, that whay they wont be visible and they wont affect the other div's positions

.box{
  display: flex;
}

.blue{
  opacity: 0;
}
.red{
  opacity: 0;
}

<div >  
  <div  style="background-color: blue"><p>1</p></div>
  <div style="background-color: yellow"><p>2</p></div>
  <div  style="background-color: red"><p>3</p></div>
  <div style="background-color: green"><p>4</p></div>
</div>

CodePudding user response：

As @Lalalena Mentioned in comment, you can use visibility:hidden

div{
  width: 10%;
  float: left;
}
.hidden{
  visibility: hidden;
}
.blue{
  background-color: blue;
}
.yellow{
  background-color: yellow; 
}
.red{
  background-color: red;    
}
.green{
  background-color: green;  
}

<div ><p>1</p></div>
<div ><p>2</p></div>
<div ><p>3</p></div>
<div ><p>4</p></div>

CodePudding user response：

div{
  width: 10%;
  float: left;
}

<div style="background-color: blue; visibility:hidden;"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red; visibility:hidden;"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>

;

CodePudding user response：

The visibility CSS property shows or hides an element without changing the layout of a document.

Depending on how you want to toggle the colors here's a quick example that uses buttons to toggle the visibility of groups of elements. Inline CSS has been moved to make the HTML cleaner, and the JS easier to use. Links for MDN documentation at the bottom of the answer.

// Cache the containers, and add a listener to the
// buttons container
const colors = document.querySelector('.colors');
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick);

// When a child in the buttons container is
// clicked (see event delegation below)...
function handleClick(e) {
  
  // ...first check it's a button
  if (e.target.matches('button')) {
    
    // ... destructure its id from the dataset
    const { id } = e.target.dataset;
    
    // ... and use the id to toggle those elements
    // in the colors container which have a `color` class
    // and a class that matches the id
    // (using a template string to create the selector)
    colors
      .querySelectorAll(`.color.${id}`)
      .forEach(color => color.classList.toggle('hidden'));
  
  }

}

.colors { display: flex; width: 60%; justify-content: left; align-items: center; }
.color { width: 20%; text-align: center; border: 2px solid white; }
.red { background-color: red; }
.blue { background-color: lightblue; }
.yellow { background-color: yellow; }
.green { background-color: lightgreen; }
.orange { background-color: orange; }
.pink { background-color: pink; }
.hidden { visibility: hidden; }
.buttons { margin-top: 1em; }

<div >
  <div ><p>1</p></div>
  <div ><p>2</p></div>
  <div ><p>3</p></div>
  <div ><p>4</p></div>
  <div ><p>5</p></div>
  <div ><p>6</p></div>
</div>

<div >
  <button data-id="group1">Toggle group 1</button>
  <button data-id="group2">Toggle group 2</button>
  <button data-id="group3">Toggle group 3</button>
</div>

Additional documentation