How do you make a button "disappear" upon a click?


Hey! here is my campaign:

In person flyer drop to website

Video on landing page

Button over top of phone number.

I want to test a few things. For people coming to the site:

  1. How many people watch the video and then click on the button to reveal the phone number?

  2. How many people click the phone number button but don’t watch the video?

  3. How many people watch the video and dont click the phone number?

  4. How many people do neither?


Brian Molloy


Hi Brian,

You can use jQuery to make something disappear on-click pretty easily, with something like this added to the head of your page (with #lp-pom-button-21 replaced with whatever your button’s ID is):

<script type="text/javascript"> <br /> $(document).ready(function(){ <br />
$("#lp-pom-button-21").click(function(){ <br />
  $("#lp-pom-button-21").hide(); <br />
}); <br /> }); <br /> </script>   

Because Unbounce’s buttons need a destination URL, you’ll need to enter something there, but something like #a would work (it would try to direct to an anchor that doesn’t exist, so your user would stay on the same page and the on-click would just make the button disappear).

Then you can just float your button over top of the text with the phone number.

That said, I’m curious to know why you’re testing this other than that it’d be interesting to know. If you want people to call you, obscuring the phone number is definitely the last thing you’d want to do. And if you want to people to watch the video to get the phone number, I’d suggest putting the phone number in your actual video at the end instead and also putting it lower down on your page below the fold.