0

I am using foundation 6 in a new project and stumbled upon an issue. I have a grid with and I want to hide a column (which I want to show again later), the problem is that if I hide the column, it does not reorder all the other columns, I tried by just hiding it with jQuery and by hiding it with Foundation's hide class (which, I guess, is basically the same thing). The only way I was able to achieve the wanted functionality is by actually removing the column completely, but I need to show it again later so this is not an option.

Please take a look at the fiddle to maybe get a better idea of what I need. (You will have to Run the script again after click one of the buttons)

JsFiddle link

Last Templar
  • 336
  • 5
  • 22

1 Answers1

1

The primary issue is you are not using the classes properly, for example the size of column should be applied to the column not the row elements.

<div class="column">

Should be:

<div class="small-4 column">

https://jsfiddle.net/875ascsk/4/

David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • wow, thanks, I just saw in a foundation template people using just `column` together with `small-up-4`, `medium-6` in the `row`. My guess is that now I would just need to add `small-4` and `medium-6` to each `column`? – Last Templar Feb 01 '16 at 20:30
  • @LastTemplar should always be on the column, I've worked with Foundation 5 and I've never seen it placed on the row. – David Nguyen Feb 01 '16 at 21:00
  • [this](http://foundation.zurb.com/templates-previews-sites-f6/portfolio.html) is the example I used – Last Templar Feb 01 '16 at 21:21
  • @LastTemplar I see that is a special type of grid where the columns are spaced on their index so "hiding" it would not affect their positions – David Nguyen Feb 01 '16 at 21:33