CODEWITHSUNDEEP
javascriptjqueryhtmlcssurl
Mubeen
Mubeen

Reputation: 2492

Can we control webpage with respect to URL?

I would like to show/hide divs in different url's. Div's show/hide based upon URL.

<div class="top">Top</div>
<div class="bottom">Bottom</div>

If www.alldiv.com both the divs should be visible else if www.bottdiv.com "top div" should hide.

Could anyone please advise?

Upvotes: 0

Views: 132

Answers (2)

mplungjan
mplungjan

Reputation: 177975

Using hostname you can do

jQuery

$(function() {
  var host = location.hostname;
  $(".top").toggle(host.indexOf("alldiv")!=-1); // only show on alldiv
});

Plain JS

window.onload=function() {
  var host = location.hostname;
  var topDiv = document.getElementsByClassName("top");
  topDiv.style.display=host.indexOf("alldiv")!=-1)?"block":"none";
}

that said, you really should not even send it to the client if you want to hide it unless you want to possibly show it later

Upvotes: 3

Patrick Roberts
Patrick Roberts

Reputation: 51886

$(function () {
  if(location.hostname == "www.alldiv.com") return;
  else if(location.hostname == "www.bottdiv.com") $(".top").hide();
})

That should do the trick as long as you import jQuery first.

Upvotes: 3

Related Questions