In this post I’ll show you how to make a locked content. To be more accurate it’s only show/hide but will look and behave like locked/unloked content.

You can check the end result this page, so you feel and experiment what I mean.

You need a few things:

1. Name the IDs of the elements you want to change.
2. Insert a Code block
3. Add the given Java Script

That’s it. No need to external, no extra plugins.

Why do you ever want to make this?

If you run some marketing campaings like product lauch event, you will want that people engage with you and make some actions. These actions can be a post comment, like facebook/instagram page, subscribe to your YouTube channel and so one.

I mean, you want some valuable actions for your user. But, for you to make them do all that in a more fun and interective way, you can provide a hidden valueable gift, like an ebook that you usually sell for a cost, a very valuable video, or even a coupon code.

This is where this approach can come handy and that’s why I build that for one of my business.

Ok, now let’s start with the actual steps you need to do to acomplish it.
So, let’s start with naming the IDs.

Naming the IDs

To ilustrate, just see the gif bellow.

You have to rename all buttons and all icons In order to work.
In this example, you should name like this

Step 1:
Button name = btn-1
Icon name = icon-1

Step 2:
Button name = btn-2
Icon name = icon-1

Step 3:
Button name = btn-3
Icon name = icon-3

Step 4 :
Button name = btn-4
Icon name = icon-4

Hidding Element

This is where you make the content look and feel like it’s locked, but in reality is just hidden.

In order to work in this example, you should name like this:

Loked Div ID= locked
Unlocked Div ID = unlocked

Adding Java Script

The Java Script basically do this.

When a button is clicked it receive a value of 1 and the icon changes it’s color to green to indicate it was clicked.
After all button is clicked the total value will be 4, which then hides the DIV locked and shows the DIV unlocked.

That’s it.

Here is the java script code used in this example:

let totalSteps = 0;
let step1IsClicked = 0;
let step2IsClicked = 0;
let step3IsClicked = 0;
let step4IsClicked = 0;

function displayVideo(){
  //Add up the total number of steps completed
  totalSteps = step1IsClicked + step2IsClicked + step3IsClicked + step4IsClicked;
  //Check if all steps have been completed
  if (totalSteps == 4){
    //Display the video
    document.getElementById("unlocked").style.display = "flex";
    document.getElementById("locked").style.display = "none";

  }
};

//Listen for clicks on btn-1
document.getElementById("btn-1").addEventListener("click", function(){
  //mark step 1 as clicked
  step1IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-1 color
  document.getElementById("icon-1").style.color = "#2aff00";
});

//Listen for clicks on btn-2
document.getElementById("btn-2").addEventListener("click", function(){
  //mark step 1 as clicked
  step2IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-2 color
  document.getElementById("icon-2").style.color = "#2aff00";

});

//Listen for clicks on btn-3
document.getElementById("btn-3").addEventListener("click", function(){
  //mark step 1 as clicked
  step3IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-3 color
  document.getElementById("icon-3").style.color = "#2aff00";
});

//Listen for clicks on btn-4
document.getElementById("btn-4").addEventListener("click", function(){
  //mark step 1 as clicked
  step4IsClicked = 1;
  //run our display video function
  displayVideo();
  //change icon-4 color
  document.getElementById("icon-4").style.color = "#2aff00";
});

Testing the end result

This is how the end result will look like.
Of course I didn’t leave any real action like link to a different page, which you will want to do in most of the cases.

Another important thing to consider is that we are not tracking if the user does the action, for example, if one of the steps were like your facebook page, it will just open a tab and hope they liked it.

That’s it.

I want to make it clear that this was acomplish because Alec Gall took the time to not only answer my post on Oxygen builder community but to also write the actual Java script to make it work without I even ask him. So thank you very much Allec Gall. You can also check his website here.

What do you think?
Any suggestion for making it better?
Comment on this post on Oxygen community