Hide and reveal – anything

Hide and reveal – anything

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:

p

Step 1

p

Step 2

p

Step 3

p

Step 4

p

Step 5

Step 1.

The first thing to do is getting your layout on track. Here i have created 5 blurbs and 5 rows with text in it. Go to step 2.

Step 2.

We give each Blurb their own unique css class: “rv_button1 closed” where rv_button1 is the trigger.

Open the Blurb – go to Advanced – give it a css class: rv_button1 closed – save and continue to the next Blurb with rv_button2 and so on till you have all your buttons set.

Hide and reveal - Balonline

Step 3.

Next step is to give your sections, rows or modules an css id, so it gets triggered when clicking on one of the Blurbs.

Open your layout nr. 1 – in my case it a row – i then go to Advanced and enter the following in the css id-field: reveal1 and this will i do on every single section, row or module that i want to have the reveal and hide option.

The next section, row or module get the css id: reveal2 and the next css id: reveal3 and so on..

Hide and reveal - Balonline

Step 4.

Now we are getting to the fun part… Add a code-module. This is where we are going to put our  JavaScript. Get the JavaScript-code in the last step – save your layout and your are good to go.

As a sidenote – you don’t have to put the JavaScript-code in a code-module, you can also just put it in under Divi Settings – Integration – Header.

Hide and reveal - Balonline

Step 5.

vil du vide mere om divi, digital marketing og wordpress

Hold dig opdateret via vores nyheder, hvor de seneste opdateringer, trends og gennembrud inden for Divi Theme, webdesign, digital marketing & sociale medier bliver vist.

what’s nice to know about

Bliv informeret, bliv inspireret, og øg din viden, mens du navigerer i de dynamiske områder inden for design og digital markedsføring.

wordpress & woocommerce

Få ekspertindsigt, optimeringstip og de seneste trends for at forbedre din WordPress- og/eller e-handelsrejse.

alt om divi og divi temaet

Få det fulde potentiale af disse temaer med eksperttips, kreative tilpasningsideer og dybdegående tutorials.

digital marketing & social media

Udforsk ekspertstrategier, trends og handlingsorienteret indsigt for at booste din digitale tilstedeværelse.

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

Vi tilbyder moderne responsiv webdesign, digital marketing samt support & vedligeholdelse af din webside eller shop.

Kontakt os for et uforpligtende tilbud eller bliv ringet op.