How do I collapse columns when they aren't on the page?-CodePudding

Thanks! Those suggestions are great. Now how would I make it if the display is style="display:none" for each column to have each column not take up blank space and just disappear altogether? When I currently attempt to do it, it still shows the space being taken up. I'm struggling to make this collapse when not being used.

<script>function hawks() {
  var x = document.getElementById("hawksSalary");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  } {
var hawks = document.getElementById("AtlantaHawks");
if (x.style.display === "block") {
hawks.style.backgroundColor = "red";
} else {
hawks.style.backgroundColor = "white";
}
}
}
</script>

<script>
function nets() {
  var x = document.getElementById("netsSalary");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  } {
var nets = document.getElementById("BrooklynNets");
if (x.style.display === "block") {
nets.style.backgroundColor = "red";
} else {
nets.style.backgroundColor = "white";
}
}


}
</script>

<script>function celtics() {
  var x = document.getElementById("celticsSalary");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  } {
var celtics = document.getElementById("BostonCeltics");
if (x.style.display === "block") {
celtics.style.backgroundColor = "red";
} else {
celtics.style.backgroundColor = "white";
}
}

}
</script>

<style>
.row {
  display: flex;
}

.row > * {
  flex: 0 0 25vw;
}}</style>


        <center><header><h2>NBA Trade Maker</h2></center>
            <nav>
<center>
<table>
<tr>
<th>Atlantic Division</th>
<th>Central Division</th>
<th>Southeast Division</th>
<th>Northwest Division</th>
<th>Southwest Division</th>
<th>Pacific Division</th>
</tr>
<tr>
<td id="BostonCeltics" onclick="celtics()">Boston Celtics</td>
<td>Chicago Bulls</td>
<td id="AtlantaHawks" onclick="hawks()">Atlanta Hawks</td>
<td>Denver Nuggets</td>
<td>Dallas Mavericks</td>
<td>Golden State Warriors</td>
</tr>
<tr>
<td id="BrooklynNets" onclick="nets()">Brooklyn Nets</td>
<td>Cleveland Cavaliers</td>
<td>Charlotte Hornets</td>
<td>Minnesota Timberwolves</td>
<td>Houston Rockets</td>
<td>Los Angeles Clippers</td>
</tr>
<tr>
<td id="NYKnicks" onclick="knicks()">New York Knicks</td>
<td>Detroit Pistons</td>
<td>Miami Heat</td>
<td>Oklahoma City Thunder</td>
<td>Memphis Grizzlies</td>
<td>Los Angeles Lakers</td>
</tr>
<tr>
<td>Philadelphia 76ers</td>
<td>Indiana Pacers</td>
<td>Orlando Magic</td>
<td>Portland Trail Blazers</td>
<td>New Orleans Pelicans</td>
<td>Phoenix Suns</td>
</tr>
<tr>
<td>Toronto Raptors</td>
<td>Milwaukee Bucks</td>
<td>Washington Wizards</td>
<td>Utah Jazz</td>
<td>San Antonio Spurs</td>
<td>Sacramento Kings</td>
</tr>
</table>
</center>
<br>
<br>
<br>

<div >
  <div >
    <div id="hawksSalary" style="display:none"><h2>Atlanta Hawks</h2>
    <p>Trae Young (Salary Here) Send To:
<select>
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select></p></div>
  </div>
  <div >
    <p id="traeYoungToCeltics" style="display:none">Trae Young</p>
    <div id="celticsSalary" style="display:none"><h2>Boston Celtics</h2>
    <p>Some text..</p></div>
  </div>
  <div >
    <div id="netsSalary" style="display:none"><h2>Column 3</h2>
    <p>Some text..</p></div>
  </div>
  <div >
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div >
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
  <div >
    <h2>Column 6</h2>
    <p>Some text..</p>
  </div>
  <div >
    <h2>Column 7</h2>
    <p>Some text..</p>
  </div>
  <div >
    <h2>Column 8</h2>
    <p>Some text..</p>
  </div>
</div>

CodePudding user response：

If each column is 25% width, that means it takes up a quarter of the width of its parent. By default .row is a block level element and in this situation inside the body it takes up the full width of the screen. Therefore your columns are 25% the screen's width.

To make your row wider than the screen we can set it to be just wide enough to fit all of its children. Except our children add up to 200% width and we will get a new row anyways despite this setting. To fix this we can instead set the width of our columns to 25vw or 25% of the width of the viewport.

* {
  box-sizing: border-box;
}


.row {
  min-width: max-content;
}

/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 25vw;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

<h2>Four Equal Columns</h2>

<div >
  <div  style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#aaa;">
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 6</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ccc;">
    <h2>Column 7</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ddd;">
    <h2>Column 8</h2>
    <p>Some text..</p>
  </div>
</div>

CodePudding user response：

It's much simpler than that with flexbox:

.row {
  display: flex;
}

.row > * {
  flex: 0 0 25vw;
}

<h2>Four Equal Columns</h2>

<div >
  <div  style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#aaa;">
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 6</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ccc;">
    <h2>Column 7</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ddd;">
    <h2>Column 8</h2>
    <p>Some text..</p>
  </div>
</div>