asked on

JQuery Show/Hide div's based on a URL.

Hi there, I am trying to code a gated content page on our site. Hiding a video.
On Page load, a popup modal form will appear asking for your email address.
-- If you enter email and click submit, you will be directed to /video-gate-test/?access=yes and the popup will not appear again.
-- If you close the modal, then you can view the page, but not allowed to play the video.

what i have done, is added an image to the /video-gate-test/ page (.img-overlay) and hid the video (.embed-container). Clicking that then it will make the popup appear again.

What i want to happen is, if the form is submitted and directed to /video-gate-test/?access=yes then, hide .img-overlay and show .embed-container

I created 2 functions

jQuery(document).ready(function($) {
	if (window.location.href.indexOf('/video-gate-test/?access=yes')) {
		//Hide the element.
		jQuery('.embed-container').show();
		jQuery('.overlay-img').hide();
		
	  }
	});


jQuery(document).ready(function($) {
	if (window.location.href.indexOf('/video-gate-test/')) {
		//Hide the element.
		jQuery('.overlay-img').show();
		jQuery('.embed-container').hide();
	  }
	});

Open in new window

if on /video-gate-test/ it correctly hides the video, and shows the overlay. but it also does the same on /video-gate-test/?access=yes'

Can you guys help with my function,
if url = /video-gate-test/ | show .overlay-img , hide .embed-container
If url = /video-gate-test/?access=yes show | .embed-container , hide .overlay-img

leakim971

var l = location.search;
var b = l.indexOf("?access=yes")==0;
jQuery(".overlay-img").css("display", b?"block":"none");
jQuery(".embed-container").css("display", b?"none":"block");

Open in new window

Jon Imms

ASKER

so i tried this

jQuery(document).ready(function($) {
    var l = location.search;
    var b = l.indexOf("?access=yes")==0;
    var c = l.indexOf("?access=yes")==1;
    jQuery(".overlay-img").css("display", b?"block":"none");
    jQuery(".embed-container").css("display", b?"none":"block");
    jQuery(".embed-container").css("display", c?"block":"none");
    jQuery(".overlay-img").css("display", c?"none":"block");

Open in new window

But when i arrive at /video-gate-test/?access=yes
.overlay-img still appears, and .embed-container is still hidden ?

leakim971

why 7 and 8 ?

Jon Imms

ASKER

I suppose i was not understanding your solution correctly.

If form is submitted and redirected to /video-gate-test/?access=yes then .overlay-img should be hidden, and .embed-container should be visible. Using your solution of

var l = location.search;
var b = l.indexOf("?access=yes")==0;
jQuery(".overlay-img").css("display", b?"block":"none");
jQuery(".embed-container").css("display", b?"none":"block");

Open in new window

It did not work when i arrived at /video-gate-test/?access=yes.
I tried to modify it a little, as if you are not on /video-gate-test/?access=yes then .embed-container should be hidden, and .overlay.img shown

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial