Using column-count with integrated show/hide moves columns around

Question

Morning, OK, I have a requirement to have a "pinterest" style page over a 3 column layout. Each column will match the same height as each other, but when we 'show/hide' content, we would like only that column to expand, which it does (in a fashion), but the columns then reorder. I'm aware this is how column-count should work, but is there anyway of forcing the columns to stay where they are?

http://jsfiddle.net/2joLm7y9/

#columns {
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;

I've tried to change the column-fill from auto to balance, but that doesn't seem to work. Click 1 works fine, but I think that's because the hidden content isn't that long after having a play.

Answer 1

 $( ".toggleDisplay" ).click(function() {
                $(this).children(".display_none").toggle("slow"); 
            });

body {
 background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
 width: 90%;
 max-width: 1100px;
 min-width: 800px;
 margin: 50px auto;
}

#columns {
 -webkit-column-count: 3;
 -webkit-column-gap: 10px;
 -webkit-column-fill: auto;
 -moz-column-count: 3;
 -moz-column-gap: 10px;
 -moz-column-fill: auto;
 column-count: 3;
 column-gap: 15px;
 column-fill: auto;
}

.pin {
 display: inline-block;
 background: #FEFEFE;
 border: 2px solid #FAFAFA;
 box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 margin: 0 2px 15px;
 -webkit-column-break-inside: avoid;
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
 padding: 15px;
 padding-bottom: 5px;
 background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
 opacity: 1;
 
 -webkit-transition: all .2s ease;
 -moz-transition: all .2s ease;
 -o-transition: all .2s ease;
 transition: all .2s ease;
}

.pin img {
 width: 100%;
 border-bottom: 1px solid #ccc;
 padding-bottom: 15px;
 margin-bottom: 5px;
}

.pin p {
 font: 12px/18px Arial, sans-serif;
 color: #333;
 margin: 0;
}

@media (min-width: 960px) {
 #columns {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
 }
}

@media (min-width: 1100px) {
 #columns {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
 }
}


 .display_none {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
 <div id="columns">
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
    Duis rutrum porta tortor ut convallis.
   </p>
            <div class="toggleDisplay">
                                <button>Click 1</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. 
   </p>
             <div class="toggleDisplay">
                                <button>Click 2</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit. Suspendisse rutrum turpis quis nunc 
    convallis quis aliquam mauris suscipit.
   </p>
             <div class="toggleDisplay">
                                <button>Click 3</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
   <p>
    Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit. Suspendisse rutrum turpis quis nunc 
    convallis quis aliquam mauris suscipit.
   </p>
             <div class="toggleDisplay">
                                <button>Click 4</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. 
   </p>
             <div class="toggleDisplay">
                                <button>Click 5</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
    Duis rutrum porta tortor ut convallis.
   </p>
             <div class="toggleDisplay">
                                <button>Click 6</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div> 
  
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit. Suspendisse rutrum turpis quis nunc 
    convallis quis aliquam mauris suscipit.
    Duis rutrum porta tortor ut convallis.
   </p>
             <div class="toggleDisplay">
                                <button>Click 7</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Nullam eget lectus augue. 
   </p>
             <div class="toggleDisplay">
                                <button>Click 8</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. 
   </p>
             <div class="toggleDisplay">
                                <button>Click 9</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
   </p>
             <div class="toggleDisplay">
                                <button>Click 10</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. 
   </p>
            
             <div class="toggleDisplay">
                                <button>Click 11</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
   </p>
             <div class="toggleDisplay">
                                <button>Click 12</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div> 
  
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. 
   </p>
             <div class="toggleDisplay">
                                <button>Click 13</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. 
   </p>
             <div class="toggleDisplay">
                                <button>Click 14</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
   </p>
             <div class="toggleDisplay">
                                <button>Click 15</button>
                                  <div class="display_none">
                                    <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
                                  </div>
                            </div>
  </div>
 </div>
</div>