Menu icon Foundation
How to activate accordion only for small screens

Image

Hi! I'm new to Foundation and am using it for my first project. I'd like to display a 3-column column pricing table on wide screens, and have it convert into an accordion for small screens.

Is there a built-in method to Foundation to do this? Or should I write my own JS to add the necessary CSS classes to my markup depending on screen size?

Attached is a screenshot from enviragallery.com/pricing/

Appreciate any pointers. Thanks!

accordionjsResponsive

Image

Hi! I'm new to Foundation and am using it for my first project. I'd like to display a 3-column column pricing table on wide screens, and have it convert into an accordion for small screens.

Is there a built-in method to Foundation to do this? Or should I write my own JS to add the necessary CSS classes to my markup depending on screen size?

Attached is a screenshot from enviragallery.com/pricing/

Appreciate any pointers. Thanks!

David Wang about 5 years ago

*bump

Steve Trask about 5 years ago

Hi David,

To change 3 pricing tables to an accordion for small screens you can either use the visability classes to hide/show the relevant format you desire http://foundation.zurb.com/docs/components/visibility.html or if you want make sure only the code is loaded once you can use interchange to switch out the code http://foundation.zurb.com/docs/components/interchange.html

As an alternative you can use custom code to transform the custom pricing table into a custom accordion something similar to the tabs version here http://webthemez.com/demo/easy-responsive-tabs/Index.html#horizontalTab1 (this used to be Foundation 4)

Really depends on scope and budget of the project

Hope this helps

Steve

David Wang about 5 years ago

Thank you Steven, that's helpful :)