This is strange to explain, but can be seen better if you have a table to view the following site on.
http://devchecksafetyfirst.csf.dcmanaged.com/responsive/index.php
The top button in orange on theleft should say ‘Countries’ and when clicked it makes a div appear from the left with an acordian style nav inside.
All works perfectly, appart from the most annoying thing, that when a user clicks one of the top level country regions, it starts the acordian nav, but at the same time closes the slider so you then have to click countries again to get at the second level nav in the acordian.
There are only 2 .js files the one below is for the div slider
// Slidebars 0.8.2 - http://plugins.adchsm.me/slidebars/ Written by Adam Smith - http://www.adchsm.me/ Released under MIT License - http://plugins.adchsm.me/slidebars/license.txt
;(function(a){a.slidebars=function(b){var v=a.extend({siteClose:true,disableOver:false,hideControlClasses:false},b);var s=document.createElement("div").style,q=false,i=false;if(s.MozTransition===""||s.WebkitTransition===""||s.OTransition===""||s.transition===""){q=true}if(s.MozTransform===""||s.WebkitTransform===""||s.OTransform===""||s.transform===""){i=true}var p=navigator.userAgent,x=false;if(p.match(/Android/)){x=parseFloat(p.slice(p.indexOf("Android")+8));if(x<3){a("html").addClass("sb-android")}}if(!a("#sb-site").length){a("body").children().wrapAll('<div id="sb-site" />')}var o=a("#sb-site");if(!o.parent().is("body")){o.appendTo("body")}o.addClass("sb-slide");if(a(".sb-left").length){var d=a(".sb-left"),e=false;if(!d.parent().is("body")){d.appendTo("body")}if(x&&x<3){d.addClass("sb-static")}if(d.hasClass("sb-width-custom")){d.css("width",d.attr("data-sb-width"))}}if(a(".sb-right").length){var f=a(".sb-right"),h=false;if(!f.parent().is("body")){f.appendTo("body")}if(x&&x<3){f.addClass("sb-static")}if(f.hasClass("sb-width-custom")){f.css("width",f.attr("data-sb-width"))}}function r(){o.css("minHeight","");if(d){d.css("minHeight","")}if(f){f.css("minHeight","")}var y=a("html").css("height");o.css("minHeight",y);if(d&&d.hasClass("sb-static")){d.css("minHeight",y)}if(f&&f.hasClass("sb-static")){f.css("minHeight",y)}}r();var u=a(".sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close");function m(){var y=a(window).width();if(!v.disableOver||(typeof v.disableOver==="number"&&v.disableOver>=y)){this.init=true;a("html").addClass("sb-init");if(v.hideControlClasses){u.show()}}else{if(typeof v.disableOver==="number"&&v.disableOver<y){this.init=false;a("html").removeClass("sb-init");if(v.hideControlClasses){u.hide()}if(e||h){j()}}}}m();var t,k=a(".sb-slide");if(q&&i){t="translate";if(x&&x<4.4){t="side"}}else{t="jQuery"}a("html").addClass("sb-anim-type-"+t);function c(y,B,A){if(t==="translate"){y.css({transform:"translate("+B+")"})}else{if(t==="side"){y.css(A,B)}else{if(t==="jQuery"){var z={};z[A]=B;y.stop().animate(z,400)}}}}function g(y){if(y==="left"&&d&&h||y==="right"&&f&&e){j();setTimeout(z,400)}else{z()}function z(){if(this.init&&y==="left"&&d){var A=d.css("width");a("html").addClass("sb-active sb-active-left");c(k,A,"left");setTimeout(function(){e=true},400)}else{if(this.init&&y==="right"&&f){var B=f.css("width");a("html").addClass("sb-active sb-active-right");c(k,"-"+B,"left");setTimeout(function(){h=true},400)}}}}function j(y){if(e||h){e=false;h=false;c(k,"0px","left");setTimeout(function(){a("html").removeClass("sb-active sb-active-left sb-active-right");if(y){window.location=y}},400)}}function l(y){if(y==="left"&&d){if(e){j()}else{if(!e){g("left")}}}else{if(y==="right"&&f){if(h){j()}else{if(!h){g("right")}}}}}this.open=g;this.close=j;this.toggle=l;function w(){r();m();if(e){g("left")}else{if(h){g("right")}}}a(window).resize(w);function n(z,y){z.stopPropagation();z.preventDefault();if(z.type==="touchend"){y.off("click")}}a(".sb-toggle-left").on("touchend click",function(y){n(y,a(this));if(d&&e!==true){g("left")}else{j()}});a(".sb-toggle-right").on("touchend click",function(y){n(y,a(this));if(f&&h!==true){g("right")}else{j()}});a(".sb-open-left").on("touchend click",function(y){n(y,a(this));if(d&&e!==true){g("left")}});a(".sb-open-right").on("touchend click",function(y){n(y,a(this));if(f&&h!==true){g("right")}});a(".sb-close").on("touchend click",function(y){n(y,a(this));if(e||h){j()}});a(".sb-slidebar a").not(".sb-disable-close").on("click",function(y){n(y,a(this));if(e||h){j(a(this).attr("href"))}});o.on("touchend click",function(y){if(v.siteClose&&(e||h)){n(y,a(this));j()}})}})(jQuery);
This one for the acordian style
$(document).ready(function(){
$("#country_Nav_Slide > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#country_Nav_Slide li ul").slideUp(350);
$("#country_Nav_Slide li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
There a slight conflict somewhere, and I cant find it.
