Link to home
Start Free TrialLog in
Avatar of Mike Tew
Mike TewFlag for Canada

asked on

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

Avatar of wwwdeveloper2
wwwdeveloper2

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.

SOLUTION
Avatar of Mike Tew
Mike Tew
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mike Tew

ASKER

The solution is direct from my javascript customization, and explains how to simplify code so the jquery cookie script is triggered correctly.