Hide and reveal any section, row or module with a click on a button like a toggle

Hide and reveal any section, row or module with a click on a button like a toggle

As a designer/developer sometimes i face some requests from my customers that i haven’t made before. One of the things i have been trying to accomplish was having blurbs open another section, row or module when clicked upon and then close when i click on another blurb.

The goal was having a nice a clean site without having much visible content on the site with a hide and reveal option – This one i made on a membershipsite that i’m currently designing/developing. You can see it in action here:

Hide and reveal with blurbs

In this tutorial i’ll show you how to use the Blurb-modules(5 of them) as buttons and when clicked upon, each blurb will reveal a section, row or module somewhere else on the site.

So first of all what is it that i’m talking about? Have a look and try out the blurbs here:

Vi udvikler, designer og transformerer din vision til din nye forretningsløsning

1 Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

2 Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

3 Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

4 Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

5 Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

6 Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.