New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally

UPDATE: Native Softr Tab Container Has Been Released

What a journey it has been! It’s been almost two years since I developed this unofficial feature, and I started to receive a real roadmap list from you. Just for the record: from the release of this unofficial feature until today, it took me around 80 hours of work to help you with it and to improve it.

The thread is currently the most viewed and the most commented in the Softr community.

Which may explain the choice of Softr to release their own native solution (:saluting_face:)

You can still use this guide, of course. Some functionalities are still “fully custom.”

Another Important Note:

I strongly encourage you to use the new native Softr tab container, whether you want to customize it with custom code or not, as one of its functionality is better than mine + overall, it will be less work and less to maintain :point_down:

My tab feature relies on frontend JavaScript to hide/show different blocks.

The Softr tab container works a bit differently: The new Tab Container initially loads and renders only those blocks that are inside the active tab. So until a user selects a tab, the blocks inside that tab are not loaded/rendered. When switching back to some of the previously selected tabs, the state of the blocks is preserved.

I know a lot of you—despite my clear warnings, some of you are quite stubborn😅—used the custom tab feature as if it could handle a lot of blocks by magic. The more you add blocks, the more you have to leverage resources to load all blocks (as a reminder: it’s not a load/unload solution, it’s a hide/show solution, which is not the same).

This is not the case with the new Softr Tab Container, which will increase your page loading speed. So, please, use it!

This thread will still serve those of you who want specific customization for the new Softr tab container.

Thanks, everyone!

6 Likes