Expand/Collapse table for Menu

Question

I have tried expand and collapse operation through jquery! But I further want to save the state of the toggle(show or hide)..even when the page is reloaded. I learned that I would need to use cookie..but I don't know how its done??

HTML:

<table width="150px" id="tbl1" class="hvr">
<tr class="header">
    <th style="font-weight:500;">Navigation<span>-</span></th>
</tr>
<tr>
<td align="center"><a href="dashboard.php">Home</a></td>
</tr>
<tr>
<td align="center"><a href="slots.php">My Team</a></td>
</tr>
<tr>
<td align="center"><a href="collection.php">All Pokemons</a></td>
</tr>
<tr>
<td align="center"><a href="battlenow.php">Battle</a></td>
</tr>
<tr>
<td align="center"><a href="train.php">Train Pokemon</a></td>
</tr>
<tr>
<td align="center"><a href="tradecenter.php">My Trade</a></td>
</tr>
<tr>
<td align="center"><a href="online.php">Online Members</a></td>
</tr>
<tr>
<td align="center"><a href="members.php">Members</a></td>
</tr>
<tr>
<td align="center"><a href="settings.php">Settings</a></td>
</tr>
<tr>
<td align="center"><a href="logout.php">Logout</a></td>
</tr>
</table>

Jquery:

$(document).ready(function(){
$('.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){});
});
});

http://jsfiddle.net/te9cB/

Answer 1

You can use the jquery cookie plugin for this.

This is how it works..

Create session cookie:

$.cookie('name', 'value');

Create expiring cookie, 7 days from then:

$.cookie('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

$.cookie('name', 'value', { expires: 7, path: '/' });

Read cookie:

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

Read all available cookies:

$.cookie(); // => { "name": "value" }

Delete cookie:

// Returns true when cookie was successfully deleted, otherwise false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// Need to use the same attributes (path, domain) as what the cookie was written with
$.cookie('name', 'value', { path: '/' });
// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true

And see this for an implementation example .