My expandable / collapsable menu cookie for unique id is not working when I click a link on my site.

I'm using the jquery cookie plugin from github - github.com/carhartl/jquery-cookie
I have a jquery menu that grabs a unique id from the open / close buttons. When refresh after clicking any one of these, the cookie triggers the show / hide as I left it. However, when I hit a link (within the page), it either completely ignores the cookie setting and/or executes the show /hides from the previous refresh.

The cookie is being triggered in the if(_slider.length). Then the jquery for the menu is checking a.open-close, a.open-close-inner, a.open-close-inners & a.opener ids against the assigned cookie. If the cookie =  'hidden', the _activeClass is removed and the parent enclosing block remains collapsed.
jQuery(function(){
	clearInputs();
	initTabs();
	initOpenClose();
});

 
// clear inputs
function clearInputs(){
	jQuery('input:text, input:password, textarea').each(function(){
		var _el = jQuery(this);
		var _val = _el.val();
		_el.bind('focus', function(){
			if(this.value == _val) this.value = '';
		}).bind('blur', function(){
			if(this.value == '') this.value = _val;
		});
	});
};

// init tabs
function initTabs() {
	jQuery('ul.tabset').each(function(){
		var _list = jQuery(this);
		var _links = _list.find('a.tab');

		_links.each(function() {
			var _link = jQuery(this);
			var _href = _link.attr('href');
			var _tab = jQuery(_href);

			if(_link.hasClass('active')) _tab.show();
			else _tab.hide();

			_link.click(function(){
				_links.filter('.active').each(function(){
					jQuery(jQuery(this).removeClass('active').attr('href')).hide();
				});
				_link.addClass('active');
				_tab.show();
				return false;
			});
		});
	});
}

// init open close
function initOpenClose(){
	// 4 level
	jQuery('div.block-inners > ul > li').OpenClose({
		opener: '.opener',
		slider: '> div.block-slide'
	});
	// 3 level
	jQuery('div.slide-block-inner').OpenClose({
		opener: '.open-close-inners',
		slider: '> div.block-inners'
	});
	// 2 level
	jQuery('div.slide-block-inner').OpenClose({
		opener: '.open-close-inner',
		slider: '> div.slide'
	});
	// 1 level
	jQuery('div.slide-block').OpenClose({
		opener: '.open-close',
		slider: '> div.block'
	});
}

// open-close plugin
jQuery.fn.OpenClose = function(_options){
	// default options
	var _options = jQuery.extend({
		activeClass:'active',
		opener:'.opener',
		slider:'.slide',
		slideSpeed: 400,
		animStart:false,
		animEnd:false,
		event:'click',
		text: true,
		openText: '+',
		closeText: '-'
	},_options);

	return this.each(function(){
		// options
		var _holder = jQuery(this);
		var _slideSpeed = _options.slideSpeed;
		var _text = _options.text;
		var _openText = _options.openText;
		var _closeText = _options.closeText;
		var _activeClass = _options.activeClass;
		var _opener = jQuery(_options.opener, _holder);
		var _slider = jQuery(_options.slider, _holder);
		var _animStart = _options.animStart;
		var _animEnd = _options.animEnd;
		var _event = _options.event;
		$('a.open-close').each(function() { 
			  var menuContent = $.cookie($(this).attr('id'));  
              if (menuContent == "hidden") {  
  				  $(this).html(_openText);
                  $(this).parent().parent(".slide-block").removeClass(_activeClass);  
              } 
		});
		$('a.open-close-inner').each(function() { 
			  var menuContent = $.cookie($(this).attr('id'));  
              if (menuContent == "hidden") {  
  				  $(this).html(_openText);
                  $(this).parent().parent(".slide-block-inner").removeClass(_activeClass);  
              } 
		});
		$('a.open-close-inners').each(function() { 
			  var menuContent = $.cookie($(this).attr('id'));  
              if (menuContent == "hidden") {  
  				  $(this).html(_openText);
                  $(this).parent().parent(".slide-block-inner").removeClass(_activeClass);  
              } 
		});
		$('a.opener').each(function() { 
			  var menuContent = $.cookie($(this).attr('id'));  
              if (menuContent == "hidden") {  
  				  $(this).html(_openText);
                  $(this).parent().parent("li").removeClass(_activeClass);  
              } 
		});
		if(_slider.length) {
		_opener.bind(_event,function(){
				if(!_slider.is(':animated')) {
					if(typeof _animStart === 'function') _animStart();
					if(_holder.hasClass(_activeClass)) {
						_slider.slideUp(_slideSpeed,function(){
							if(typeof _animEnd === 'function') _animEnd();
						});
						_holder.removeClass(_activeClass);
						//var _holder.attr('id'), 
						$.cookie($(this).attr('id'), 'hidden');
						   
						if (_text) $(this).html(_openText)
					} else {
						_holder.addClass(_activeClass);
						$.cookie($(this).attr('id'), 'visible');
						if (_text) $(this).html(_closeText);
						_slider.slideDown(_slideSpeed,function(){
							if(typeof _animEnd === 'function') _animEnd();
						});
					}
				}
				return false;
			});
			if(_holder.hasClass(_activeClass)) _slider.show(); 
			else _slider.hide();
		}
	});
}

Open in new window

m2ewAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

wwwdeveloper2Commented:
Can i see a copy of your source code where you are calling the jquery functions?  Either here or a link to your web server would work.

0
m2ewAuthor Commented:
Before I pass up the url, I was doing some research and it turns out there has been some issues with chrome triggering cookie events with this jquery script.

I moved the check for the cookie outside of the menu options and manually added the classes there. Also, once I assigned the path: "/" then it was responding much better. No issues in firefox or safari, but chrome is a little buggy.
0
m2ewAuthor Commented:
In addition to the previous revision, I simplified the check script done to one jquery .each function
Each level of the menu has a unique wrapper, so I just added an additional class to all the collapse expand button (.wwp-menu-select). Once that was done, the simplified check looks at the wrapper div else the wrapper li for the "active" class. This is working in FF // Chrome // Safari // IE

jQuery('.wwp-menu-select').each(function() {
                    var menuContent = jQuery.cookie(jQuery(this).attr('id'));
              if (menuContent == "hidden") {  
                            jQuery(this).html("+");
                            if(jQuery(this).parent().parent("div").hasClass("active")) {
                        jQuery(this).parent().parent("div").removeClass("active");  
                  }else if (jQuery(this).parent().parent("li").hasClass("active")){
                        jQuery(this).parent().parent("li").removeClass("active");
                  }
              }
      });
jQuery(function(){
	clearInputs();
	initTabs();
	initOpenClose();
});

 
// clear inputs & trigger cookie show hide for menu
function clearInputs(){
	jQuery('.wwp-menu-select').each(function() { 
			  var menuContent = jQuery.cookie(jQuery(this).attr('id')); 
              if (menuContent == "hidden") {  
  				  jQuery(this).html("+");
  				  if(jQuery(this).parent().parent("div").hasClass("active")) {
                  	jQuery(this).parent().parent("div").removeClass("active");  
                  }else if (jQuery(this).parent().parent("li").hasClass("active")){
                  	jQuery(this).parent().parent("li").removeClass("active");
                  }
              } 
	});

	jQuery('input:text, input:password, textarea').each(function(){
		var _el = jQuery(this);
		var _val = _el.val();
		_el.bind('focus', function(){
			if(this.value == _val) this.value = '';
		}).bind('blur', function(){
			if(this.value == '') this.value = _val;
		});
	});
};

// init tabs
function initTabs() {
	jQuery('ul.tabset').each(function(){
		var _list = jQuery(this);
		var _links = _list.find('a.tab');

		_links.each(function() {
			var _link = jQuery(this);
			var _href = _link.attr('href');
			var _tab = jQuery(_href);

			if(_link.hasClass('active')) _tab.show();
			else _tab.hide();

			_link.click(function(){
				_links.filter('.active').each(function(){
					jQuery(jQuery(this).removeClass('active').attr('href')).hide();
				});
				_link.addClass('active');
				_tab.show();
				return false;
			});
		});
	});
}

// init open close
function initOpenClose(){
	// 4 level
	jQuery('div.block-inners > ul > li').OpenClose({
		opener: '.opener',
		slider: '> div.block-slide'
	});
	// 3 level
	jQuery('div.slide-block-inners').OpenClose({
		opener: '.open-close-inners',
		slider: '> div.block-inners'
	});
	// 2 level
	jQuery('div.slide-block-inner').OpenClose({
		opener: '.open-close-inner',
		slider: '> div.slide'
	});
	// 1 level
	jQuery('div.slide-block').OpenClose({
		opener: '.open-close',
		slider: '> div.block'
	});
	
	
}

// open-close plugin
jQuery.fn.OpenClose = function(_options){
	// default options
	var _options = jQuery.extend({
		activeClass:'active',
		opener:'.opener',
		slider:'.slide',
		slideSpeed: 400,
		animStart:false,
		animEnd:false,
		event:'click',
		text: true,
		openText: '+',
		closeText: '-'
	},_options);
	
	
	return this.each(function(){
		// options
		var _holder = jQuery(this);
		var _slideSpeed = _options.slideSpeed;
		var _text = _options.text;
		var _openText = _options.openText;
		var _closeText = _options.closeText;
		var _activeClass = _options.activeClass;
		var _opener = jQuery(_options.opener, _holder);
		var _slider = jQuery(_options.slider, _holder);
		var _animStart = _options.animStart;
		var _animEnd = _options.animEnd;
		var _event = _options.event;

		if(_slider.length) {
			_opener.bind(_event,function(){
				
				if(!_slider.is(':animated')) {
					if(typeof _animStart === 'function') _animStart();
					if(_holder.hasClass(_activeClass)) {	
						_slider.slideUp(_slideSpeed,function(){
							if(typeof _animEnd === 'function') _animEnd();
						});
						_holder.removeClass(_activeClass);
						$.cookie($(this).attr('id'), 'hidden', {path: "/", domain: "wwp.m2ew.com"});
						//alert($(this).attr('id'));
						
						if (_text) $(this).html(_openText)
					} else {
						_holder.addClass(_activeClass);
						
						if (_text) {
							$(this).html(_closeText);
							$.cookie($(this).attr('id'), 'visible', {path: "/", domain: "wwp.m2ew.com"});
						}
						_slider.slideDown(_slideSpeed,function(){
							if(typeof _animEnd === 'function') _animEnd();
						});
					}
				}
				return false;
			});
			if(_holder.hasClass(_activeClass)) {
			_slider.show();
			
			} else {
			_slider.hide();
			
			}
		}
	});
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
m2ewAuthor Commented:
The solution is direct from my javascript customization, and explains how to simplify code so the jquery cookie script is triggered correctly.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.