jQueryアコーディオンで複数メニューを開きたい

質問

jQueryで開閉式（アコーディオン）の縦メニューを作りました。
http://www1.m.jcnnet.jp/minato01/demo/j-menu/

このメニューで、以下の２点の仕様を追加希望です。

１.　「メニュー１」「メニュー２」を最初から開いた状態で表示したい

２.できれば、ページ移動した場合、前の開いた内容を記憶させたい（cookieでOK）

特に「１」は必須事項です。
色々検索してみましたが、方法が色々あっても
すべて満たす方法が見つかりません。
ソースは以下の通りです。

--------------------
html
--------------------
<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>
<span>メニュー 4</span>
<ul>
<li><a href="#">メニュー 4-1</a></li>
<li><a href="#">メニュー 4-2</a></li>
<li><a href="#">メニュー 4-3</a></li>
</ul>

--------------------
css
--------------------
ul, li { text-indent: 0; list-style: none; }
ul { display: none; }
ul.selected { display: block; }
span { margin-bottom:1px; padding: 8px 4px; display: block; cursor: pointer; border:1px solid #ccc; }
span:before { padding: 0 8px 0 0; vertical-align: middle; content: url("img/bullet_arrow_right.png"); }
span.selected:before { content: url("img/bullet_arrow_down.png"); }
span:hover,li:hover { background: #f3f3f3; }

--------------------
js
--------------------
$(function() {
$('<img>').attr('src', 'img/bullet_arrow_down.png');
$('span').click(function() {
$(this).next('ul').slideToggle('fast');
$(this).toggleClass('selected');
});
});

※jQueryは「jquery-1.9.0.min.js」を読み込んでいます。

--------------------
参考サイトは以下のサイトです。
http://php.o0o0.jp/article/4138817358715040

分かる方、ぜひ具体的にどこをどう修正したらよいか
詳しく教えていただければ幸いです。
どうぞよろしくお願いいたします。

回答No.1

fujillin

こんにちは。

＞特に「１」は必須事項です。
とのことなので１のみですが・・・

以下のどちらのやり方でも可能かと
　・初期設定でselectedのクラスを設定しておく
　・スクリプトで設定後にクリックを行なう

２番目の方法は、設定のスクリプトにチェーン・メソッドで、
　.filter(":lt(2)").click();
みたいな感じ。
（上記の場合だと最初の２項目が対象）

２は、ご質問通りで、「メニューを変更したらその状態をクッキーに保存。」
「ページの読み込み時にクッキーを調べ、その状態にセットする。」
といった部分を追加すればよろしいかと思います。
クッキーの読み書きについては、検索すれば情報がたくさんみつかるはずです。

お礼

fujillinさん、ご回答ありがとうございます。

＞・初期設定でselectedのクラスを設定しておく
＞・スクリプトで設定後にクリックを行なう

もし、可能であればソースを記入いただけると
非常にありがたいです。
どうぞよろしくお願いいたします。