1

I'm using column-count: 3 to divide a list into three columns and styles each list item with display: inline-block to keep the list item´s children in the same column. The children are hidden with max-height and overflow: hidden.

I want to expand and show the children on click by setting max-height: none, but since column-count tries to evenly balance all columns dynamically the list gets reordered. I understand that's what column-count is for.

I would like to use something similar to column-count: 3 but "lock" it after page load so it doesn't reorder when expanding children. Would that be possible without splitting the items into three different lists? The only requirement is that it works on IE11.

Here is my codepen demo to illustrate the problem.

Calsal
  • 1,375
  • 14
  • 25
  • I assume the list items will be dynamic (i.e. the number will change), so you can't hard code them into three divs? – sn3ll Apr 06 '17 at 19:38
  • If you're using JavaScript for the functionality anyway, you can build the three lists programmatically on page load. – Mr Lister Apr 06 '17 at 19:50
  • Thanks for your thoughts. I guess I could split them up with javascript but I have a rather large menu (5+ different entries, each have three columns) and I guess it's not efficient to build three lists for every entry. The numbers won't change, it's always 3. The only solution I can think of yet is to hard code them into different divs in backend. – Calsal Apr 07 '17 at 08:47

0 Answers0