Looking for a stack that can reflow column content when toggled

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’m not 100% on this but perhaps Doobox’s Reflow Stack will give you what you need?


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.


So reflow stack for example…

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.


There is a row available for each device size to enter these numbers. This tells the columns how to behave for each of the device sizes.

You get the idea. :wink:

1 Like

Not sure if you’re on the other forum (that shall not be named) but @tav posted a link to a snippet that should do what you’re asking:


1 Like

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.

Great solution!


Hmm, Check out Joe’s CMS stacks. Sounds like those may do what you are looking for.

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.

You can actually turn on and off pages with Total CMS!

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.

I know, was just informing you and everyone else about that ability, as it is not well known.

Hey zeebe, can you pleeeease tell me how you did that? Some description about the necessary procedure would be highly appreciated! :slight_smile:

Yes, I am going to try and finish the FAQ for that today, but more likely this weekend.

Hey, that would be great. Thanks a lot!