I’m using Foundation’s Total Content Management System’s Toggle Stack, so I can toggle content on or off.
I would like to setup several stacks of content that I can toggle on/off into three columns and several rows as needed (desktop view). How can I get this content to reflow without showing a hole when a stack is toggled off?
Example: If I Toggle-off a stack in row 1, column 2, I would like the stack from column 3 to flow into row 1, column 2. And row 2, column 1 to flow into row 1, column 3. I hope this makes sense. I suspect there is a stack out there I could use to make this happen.
I looked into Doobox’s Reflow Stack, but it just looks like a responsive column stack. Maybe they will someone will chime in with another stack recommendation.
Set 4 columns on all devices of equal width by setting each device row in the settings to 3,3,3,3
Now if you wanted to for example hide the contents of column 2 on only iPad portrait size, then on the iPad portrait row change the setting to 4,0,4,4
0 will hide a column and allow the proceeding column to flow into the newly available ospace.
As long as each row totals twelve in the settings then the columns will neatly fill that row at that device size.
Thanks, but I don’t want to hide entire columns. I want to be able to toggle specific stacks on or off and have everything reflow. I’ll check out the snippet mentioned below.
Yes, the snippet WORkED! I used Foundation’s Block Grid stack and put content into several Foundation Toggle stacks. Then I pasted the JV Snippet into the global JV script area and it worked. Now when I toggle the content off of a block (so that it’s blank) the blocks adjust and there are no blank spots.
Yes, that’s what we’re talking about. Joe’s Total Content Management Stack called Toggle, plus his Foundation Stack called Block Grid. By adding the Javascript snippet to the global javascript I was able to solve my challenge, thanks to the community’s support.
Thanks. That’s good to know, but it doesn’t really relate to the challenge and solution presented. Read the beginning of this thread and you’ll find a cool little trick that would be great to incorporate into the Block Grid stack someday.
Instead of leaving a blank space if a block’s stack is toggled off, the snippet fills the blank space with the next block. Pretty cool if you ask me.