I'm working on creating a 3-column grid where hidden objects can be revealed and expanded within the same column without affecting the layout of other columns. Currently, when the button to show the hidden content is clicked, the content below shifts to the next column. How can I keep it within 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>