Question

I have two div’s that holds banner ads loaded dynamically from an ad server,the main one is “#bannerTop” and the other is “#brokerageBanner”. Only one div that holds these ads needs to be visible at a time based on what tab is active. The page has a tab set up for each type of partner, which there are really only two – brokerage partners and all others. I need to show “#brokerageBanner” only when the tab “#BrokContent” is visible. Should I use the appended url “/partners#Brokerage” or the div that holds that content “#BrokContent” to trigger which banner ad is shown? I am having some isues with this:

if ($("#BrokContent").is(:visible)) {
   $("#brokerageBanner").show();
   $("#bannerTop").hide();
 } else {
 $("#bannerTop").show();
 $("#brokerageBanner").hide();
}

thanks

Answer 1

:visible is a selector and needs to be un quotes, like this:

if ($("#BrokContent").is(":visible")) {
  $("#brokerageBanner").show();
  $("#bannerTop").hide();
} else {
  $("#bannerTop").show();
  $("#brokerageBanner").hide();
}

Or a bit more concise using .toggle(bool) like this:

var bcVisible = $("#BrokContent").is(":visible");
$("#brokerageBanner").toggle(bcVisible);
$("#bannerTop").toggle(!bcVisible);