Hidden content distorts column on css multicolumn layout

Question

I'm trying to get a 3 column grid to have the ability for hidden objects to show and expand on the same column without the content moving to the next column or creating white space for the other columns. This is what I have so far, but when you click the button to show the hidden content the content below moves to the next column. How can I make it stay in the same column?

$("#clickable").click(function(){
  $(".hidden_until_button_clicked").toggle();
});

#container {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
.flex-col {
  columns: 3;
  -webkit-columns: 3;
}
.box {
  height: auto;
  display: block;
  margin-bottom: 20px;
  page-break-inside: avoid;
  background-color: red;
}
.hidden_until_button_clicked{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="container" class="flex-col">
    <div class="box">Box 1</div>
    <div class="box">
      Box 2 <br />
      <button id="clickable">Click me</button>
      <div class="hidden_until_button_clicked">
        <p>This is all the extra content hidden until clicked</p>
      </div>
    
    </div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>

score 0 · Answer 1 · answered Sep 23 '19 at 19:21

You can set the position absolute to the div that shows after click:

$("#clickable").click(function(){
  $(".hidden_until_button_clicked").toggle();
});

#container {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
.flex-col {
  columns: 3;
  -webkit-columns: 3;
}
.box {
  height: auto;
  display: block;
  margin-bottom: 20px;
  page-break-inside: avoid;
  background-color: red;
}
.hidden_until_button_clicked{
  display: none;
  position: absolute;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="container" class="flex-col">
    <div class="box">Box 1</div>
    <div class="box">
      Box 2 <br />
      <button id="clickable">Click me</button>
      <div class="hidden_until_button_clicked">
        <p>This is all the extra content hidden until clicked</p>
      </div>
    
    </div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>

Hidden content distorts column on css multicolumn layout

1 Answers1