11

I have a rather difficult issue I'm stuck on I would appreciate some insight to if this is even possible with CSS. I have 6 divs, 1-3 need to be in a left column, and 4-6 in a right column. When you click any of the divs, they hide using jquery hide(). The part I am finding difficult is when you remove one div, I need them to reorder in a specific way. Please see attached image for the order / reorder proses im going for. see my fiddle for my progress, thanks a bunch for the help.

https://jsfiddle.net/m44pzvz4/ 

 <div id="container">
     <div class="child">1</div>
     <div class="child">2</div>
     <div class="child">3</div>
     <div class="child">4</div>
     <div class="child">5</div>
     <div class="child">6</div>  
 </div>

enter image description here

So you can see that if any 1-3 div is removed, the divs in 4-6 need to b moved from left column to the last spot in the first column.

Chloe
  • 25,162
  • 40
  • 190
  • 357
nick
  • 1,226
  • 3
  • 21
  • 38
  • Are you always going to have exactly 6 elements? – James McDonnell Mar 31 '15 at 20:49
  • yes. there will always be a max of 6. – nick Mar 31 '15 at 20:49
  • Use child selectors to float the first three items to the left. When an item is hidden, it won't be considered one of the first three children, and it will shift everything like you described. – Matthew Darnell Mar 31 '15 at 20:51
  • I did attempt that, but I found that when you remove a div with .toggle() it still holds its nth-of-type position. So even when its removed form page .nth-of-type(1) still is .nth-of-type(1). As apposed to .nth-of-type(2) becoming .nth-of-type(1). – nick Mar 31 '15 at 20:52
  • 1
    Think of it as a grid, leave your cells alone and just worry about moving the data. Eg: if 4 is removed shift 5s data to where 4's element is. – floor Mar 31 '15 at 20:53
  • ahh yes I see thats a good approach to it. – nick Mar 31 '15 at 20:56
  • 1
    Heres an alternate solution using javascript, you could give it a shot.https://jsfiddle.net/m44pzvz4/2/ – James McDonnell Mar 31 '15 at 21:16

2 Answers2

11

You can use flex-flow: column wrap:

$(".item").each(function() {
  $(this).on("click", function() {
    $(this).hide()
  });
});

$("button").each(function(index) {
  $(this).on("click", function() {
    $('#' + (index + 1)).toggle();
  });
});
.container {    
  display: -webkit-flex;     
  display: flex;             
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  width: 100px;
  height: 150px;
}

.item {
  width: 50px;
  height: 50px;
  border: 1px;
  line-height: 50px;
  text-align: center;
}

.r { background-color: #bf616a; }
.o { background-color: #d08770; }
.y { background-color: #ebcb8b; }
.g { background-color: #a3be8c; }
.b { background-color: #96b5b4; }
.v { background-color: #8fa1b3; }

.layout {  
  display: -webkit-flex;
  display: flex;        
  width: 400px;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout">
  <div class="container">
    <div id='1' class="item r">1</div>
    <div id='2' class="item o">2</div>
    <div id='3' class="item y">3</div>
    <div id='4' class="item g">4</div>
    <div id='5' class="item b">5</div>
    <div id='6' class="item v">6</div>
  </div>

  <div>
    Toggles:
    <div>1
      <button>toggle</button>
    </div>
    <div>2
      <button>toggle</button>
    </div>
    <div>3
      <button>toggle</button>
    </div>
    <div>4
      <button>toggle</button>
    </div>
    <div>5
      <button>toggle</button>
    </div>
    <div>6
      <button>toggle</button>
    </div>
  </div>
</div>
dting
  • 38,604
  • 10
  • 95
  • 114
10

Use CSS columns and remove the float properties of your children:

#container {
  /* ... */
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2;  /* Firefox */
  column-count: 2;
  height: 300px;
}

Additionally, to prevent your boxes from splitting between columns (found here):

.child {
    /* ... */
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

JS Fiddle Demo

Community
  • 1
  • 1
blex
  • 24,941
  • 5
  • 39
  • 72