Solved

Hide section based on URL parameter

  • 1 July 2020
  • 7 replies
  • 507 views
Kevin

Hi there,

I am trying to show a certain section when a url parameter is being used, otherwise hide by default.

I would like to set something up where if the url doesn’t contain “?parameter=”, this section is hidden.

For example:
google.com/?parameter=blue // section would be displayed
google.com/?parameter=red // same section would be displayed
google.com/ // section would be hidden

Appreciate any help!

icon

Best answer by tsprinkel 2 July 2020, 18:45

View original

7 replies

Jess
Rank
Userlevel 7
Badge +1

Hi Kevin,

Hiding sections based on URL parameters can be tricky because of the way Unbounce pages are set up. You’ll see from this post that @claudias and @mccamon found a solution and they may be able to share the script for it, but it seemed quite custom:

@Hristian was also able to achieve something similar here, so it might be worth getting in touch with him directly.

If you’re open to other solutions, Dynamic Text Replacement might give you the functionality you’re looking for. Here’s some documentation to consider.

Hope that helps a bit for now!

-Jess

tsprinkel
Badge

For sure you need some JS and a little bit of CSS to accomplish this. Since the default is to hide, you’d need something like this in your CSS:

#elementToHide {
    display: none;
}

#elementToHide[data-show-element="true"] {
   display: block;
}

Additionally, you’d need some JS to set the visibility. Something simple, but not compatible with all browsers might be:

window.addEventListener('load', (event) => {
    var params = new URLSearchParams(window.location.search);
    if(params.has("parameter")){
        document.getElementById("elementToHide").setAttribute("data-show-element", "true");
    }
});

Example page: http://unbouncepages.com/horizons-87
http://unbouncepages.com/horizons-87/?parameter=abc

Jess
Rank
Userlevel 7
Badge +1

This is amazing, Todd! 🔥

Thanks so much for sharing this!

Kevin

Thanks a ton for this Todd! I think i’m close to getting it to work. Is there a way I can hide the entire block/section and not just an element within? I’ve been able to get the background of the block to hide/unhide with the parameter, but the block and the space it takes up still remain.

tsprinkel
Badge

You can put in the ID of the div, section, or whatever it is you’re trying to hide, and that should hide everything within it. If you have a live URL, that’d be easier to provide guidance.

display: none;also will hide the space that the element takes up. If you had wanted the space to remain, you could use visibility: hidden;.

laurent

Why not using google optimize? No need of coding anything, you can simply add/update whatever you want based on any type of conditions.

Kevin

For some reason I can’t get it to work within Unbounce, I think optimize/tag manager will the route I go here. Thank you Laurent.

Reply


Terms & ConditionsCookie settings