On our Offices page if you click the dots on the map it opens a div below and changes the sidebar contents. We added a dropdown so you could select cities on mobiles. Since I recreated the website and copied over the code I've done something and it doesn't work anymore.
I know the problem has something to do with this bit of code
$('#continent').change(function() { $('.targetDiv').hide(); $('#worldwide').hide(); var target = $("select option:selected").attr('target'); var value = $("select option:selected").attr('value'); console.log($('#'+ value)); $(".detail-container").empty(); $('#'+ value).clone().show().appendTo(".detail-container"); $('#div'+ target).show(); if (value == "worldwide") { $('.slidingDiv').slideUp(); }});
Here is the full code
jQuery(function($) { $(".dot").show(); $('.dot').click(function() { $(".slidingDiv").slideDown('slow'); }); $('#continent').change(function() { $(".slidingDiv").slideDown('slow'); });});jQuery(function($) { $('#showSingle').click(function() { $('.targetDiv').show(); }); $('.dot').click(function() { $('.targetDiv').hide(); $('#div'+ $(this).attr('target')).show(); var value = $(this).attr('city'); $(".detail-container").empty(); $('#'+ value).clone().show().appendTo(".detail-container"); $('#'+ value).show(); $('#continent').val(value); }); $('#continent').change(function() { $('.targetDiv').hide(); $('#worldwide').hide(); var target = $("select option:selected").attr('target'); var value = $("select option:selected").attr('value'); console.log($('#'+ value)); $(".detail-container").empty(); $('#'+ value).clone().show().appendTo(".detail-container"); $('#div'+ target).show(); if (value == "worldwide") { $('.slidingDiv').slideUp(); } });});
I'm sure this is something simple for someone who knows Javascript.
Thanks.