Search code examples
responsive-designzurb-foundationzurb-foundation-6

Column collapsible to a button on mobile

I have a 2 columns page and I want that on small screens the first column to be replaced by a small column with just a button on it. When you click the button the original first column appears again (like it is on Wordpress for example).

Thank you.

Solution

  • You cannot reduce a column into a button on a breakpoint (not without adding a lot of code), but you can:

    • Add a new column with class="column small-12 hide-for-medium", and put the button there... this will keep the column hidden from medium up.
    • The collapsible column (the first one) will have the class hide-for-small-only, so this will be hidden on small breakpoint; please add an id to this column.
    • Using jQuery, on the button click, hide/show the first column (the one with the ID, you sould use slideToggle() from jQuery), and that's it.

    Hope this helps.