jQuery and Nav

[Danny159]

Hey,

I am trying to get this working but failing!

I am trying to make it so when you click the heading it opens the nab to do with that heading, and remember it... so next time you go onto the site it will remember what tabs you had open at the time... but its not working. If anyone has any Ideas that would be grand.

The JS
I do have the jQuery script included and the cookie jquery files

<script type="text/javascript">
$(document).ready(function(){

// Open / Close Panel According to Cookie //    
if ($.cookie('panel') == 'open'){    
	$('ul').slideDown('fast'); // Show on Page Load / Refresh with Animation
	$('ul').show(); // Show on Page Load / Refresh without Animation
} else {
	$('ul').slideUp('fast'); // Hide on Page Load / Refresh with Animation
	$('ul').hide(); // Hide on Page Load / Refresh without Animation
}

// Toggle Panel and Set Cookie //
$('#sidebar .head').click(function(){        
	$('ul').slideToggle('fast', function(){
		if ($(this).is(':hidden')) {
			$.cookie('panel', 'closed');
		} else {
			$.cookie('panel', 'open');
		}
	});
});

});
</script>

The HTML

<div id="sidebar" class="sidebar-left">
<div class="section">
<a href="?" class="head">Dashboard</a>
<ul>
<li><a href="?page=edit_details" class="">Edit Details</a></li>
<li><a href="?page=search" class="">Search</a></li>
</ul>

<a href="?" class="head">Clients</a>
<ul>
<li><a href="?page=new_client" class="">New Client</a></li>
<li><a href="?page=view_clients" class="">View Clients</a></li>
</ul>

<a href="?" class="head">Suppliers</a>
<ul>
<li><a href="?page=new_supplier" class="">New Supplier</a></li>
<li><a href="?page=view_suppliers" class="">View Suppliers</a></li>
</ul>

</div>
</div>

Thanks in advanced.

[Airshow]

You should be able to do something like this :

$(document).ready(function(){
	$('#sidebar .head').each(function(){
		var $this = $(this);
		var key = $this.html();
		var action = $.cookie(key) ? 'slideDown' : 'slideUp';
		$this.next('ul')[action]('fast');
	}).click(function(){
		var $this = $(this);
		var key = $this.html();
		$this.next('ul').slideToggle('fast', function(){
			$.cookie(key, $(this).is(':hidden'));
		});
	});
});

untested

Airshow

[Danny159]

Thanks Airshow, just 1 small problem... when you click they open, on page refresh there still open, all good but then when you click to close them they close but on refresh there still open when now they should be closed?

Dan

[Airshow]

Must be something to do with the :hidden test.

Try this version and let me know if the alert correctly reports 'opened' and 'closed':

$(document).ready(function(){
	$('#sidebar .head').each(function(){
		var $this = $(this);
		var key = $this.html();
		var action = $.cookie(key) ? 'slideDown' : 'slideUp';
		$this.next('ul')[action]('fast');
	}).click(function(){
		var $this = $(this);
		var key = $this.html();
		$this.next('ul').slideToggle('fast', function(){
			alert($(this).is(':hidden') ? 'closed' : 'opened');//debug alert
			$.cookie(key, $(this).is(':hidden'));
		});
	});
});

Airshow

[Danny159]

Must be something to do with the :hidden test.

Try this version and let me know if the alert correctly reports 'opened' and 'closed':

$(document).ready(function(){
	$('#sidebar .head').each(function(){
		var $this = $(this);
		var key = $this.html();
		var action = $.cookie(key) ? 'slideDown' : 'slideUp';
		$this.next('ul')[action]('fast');
	}).click(function(){
		var $this = $(this);
		var key = $this.html();
		$this.next('ul').slideToggle('fast', function(){
			alert($(this).is(':hidden') ? 'closed' : 'opened');//debug alert
			$.cookie(key, $(this).is(':hidden'));
		});
	});
});

Airshow

Thanks for your comment back.
As they are all now open, when I click on it to close the alert say closed and then when I click it to open it again it says opened.

[Airshow]

Dan,

Try this:

$(document).ready(function(){
	$('#sidebar .head').each(function(){
		var $this = $(this);
		var key = $this.html();
		var action = (Number($.cookie(key))==1) ? 'slideDown' : 'slideUp';
		$this.next('ul')[action]('fast');
	}).click(function(){
		var $this = $(this);
		var key = $this.html();
		$this.next('ul').slideToggle('fast', function(){
			$.cookie(key, $(this).is(':hidden') ? 0 : 1);
		});
	});
});

It now saves 0 for closed or 1 for open, in the cookie.

You will need to close/open all sections to replace the old cookie values, then it should work ..... fingers crossed.

Airshow

[Airshow]

Dan,

My code uses your section headings 'Dashboard', 'Clients' and 'Suppliers' as cookie keys.

If you want to store other properties of 'Dashboard', 'Clients' and 'Suppliers', then you may want to add suffixes, eg. 'Dashboard_nav'/'Clients_nav'/'Suppliers_nav'.

The mods to do this are very simple. Just change the two lines key = ..... .

Elsewhere in your code, you can then use other suffixes for other properties, eg.:

• 'Dashboard_color'/'Clients_color'/'Suppliers_color'
• 'Dashboard_highlight'/'Clients_highlight'/'Suppliers_highlight'
• 'Dashboard_timestamp'/'Clients_timestamp'/'Suppliers_timestamp'

Airshow

[Danny159]

Dan,

Try this:

$(document).ready(function(){
	$('#sidebar .head').each(function(){
		var $this = $(this);
		var key = $this.html();
		var action = (Number($.cookie(key))==1) ? 'slideDown' : 'slideUp';
		$this.next('ul')[action]('fast');
	}).click(function(){
		var $this = $(this);
		var key = $this.html();
		$this.next('ul').slideToggle('fast', function(){
			$.cookie(key, $(this).is(':hidden') ? 0 : 1);
		});
	});
});

It now saves 0 for closed or 1 for open, in the cookie.

You will need to close/open all sections to replace the old cookie values, then it should work ..... fingers crossed.

Airshow

Nice one mate, works a treat! Thanks so much!
Dan