公開日:2012.11.14

cookie.jsで開閉記憶アコーディオン

テクログ

こんにちは。
先日jQueryのプラグインで、手軽かつ面白いかなと思うものを見つけました。
ご存知の方はご容赦ください。

?

その名も「jquery.cookie.js」
JavaScriptで、簡単に!クッキーを扱えるプラグインです。

?

今回はこれを用いて、
「アコーディオンの開閉状態をクッキーで記憶しておく」サンプルを作成してみました。
アコーディオンを開いた状態でページを遷移(更新する等)しても
開きっぱなしにしておけるアコーディオンです。

?

画像やCSSはないのでさびしいですが、
サンプルはこちら
(GoogleChromeでしか試してないので、動かなかったらすみません…)

?

↓参考にさせて頂いたサイトはこちら↓
『jQueryを使ったスライド開閉メニューをCookieでコントロールする』

では、解説していきます。

?

―――――――――――――――――――――――――――――――――――
まずはjquery.cookie.jsの使い方です。

*********************************
1.クッキーに値を保存する
 $.cookie(“クッキーの名前”, “値”);

2.クッキーの値を呼び出す
 $.cookie(“クッキーの名前”);

3.クッキーを削除する
 $.cookie(“クッキーの名前”, null);
*********************************

以上です。簡単ですよねヽ(´▽`)ノ

?

保存する際、第3引数にオプションを持たせることで、保存日数等を指定したりもできるようです。
 $.cookie(“クッキーの名前”, “値”, {expires: 7});

?

※注意 – クッキー削除時の不具合※
上記の削除方法だと、クッキーが削除されない場合があるようです。
その場合下記に変更すれば良いみたいです。
 $.cookie(“XXXXX”, “”,{,expires:-1});

クッキーの値を空にして、有効期限を過去に指定しています。

?

↓参考サイト↓
『jquery.cookie|null指定でクッキー削除されないケースあり』

?

―――――――――――――――――――――――――――――――――――
以上を踏まえまして、アコーディオンを実装してみます。

?

<html>


アコーディオンタイトル0



    ?
  • コンテンツ

  • ?
  • コンテンツ


アコーディオンタイトル1



    ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ


アコーディオンタイトル2



    ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ


アコーディオンタイトル3



    ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ


アコーディオンタイトル4



    ?
  • コンテンツ

  • ?
  • コンテンツ

  • ?
  • コンテンツ


※クリックするアコーディオンタイトルの箇所にだけ、クラスを振っています。

?

<css>

.accordion_title {
?cursor:pointer;
}

※カーソルをポインタにするCSSのみ記述しています。

?

<JS(必要なファイルを読み込む)>



使うのは、2つだけです。
・通常のjQueryライブラリ(上)、
・jquery.cookie.js(下)

?

※2012/11現在、jquery.cookie.jsは配布元に置いていない(?)ようです。
下記サイトを参考に入手できます。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1079503625

?

ここまでがアコーディオンの準備。
次がいよいよ、アコーディオンの動きと、クッキーによる開閉記憶の処理になります。

?

<JS(アコーディオン処理を書く)>

$(function() {
?/**************************/
?/*** クッキーの値を設定 ***/
?/**************************/
?var cookie = "";
?//クッキーが存在する場合、変数に値を設定
?if($.cookie("accordion") && $.cookie("accordion") != null) {
??var cookie = $.cookie("accordion");
?}

?/**************************************/
?/*** アコーディオンをひとつずつ設定 ***/
?/**************************************/
?$(".accordion_title").each(function(index) {

??/*** クッキー情報から、はじめの開閉状態を判断 ***/
??//クッキーが存在しない or クッキーにアコーディオンナンバーがない場合、閉じる
??if($.cookie("accordion") == null || cookie.indexOf(index) == -1) {
???$(this).next().hide();

??//クッキーにアコーディオンナンバーがある場合、開ける
??} else {
???$(this).addClass("opend");
???$(this).next().show();
??}

??/*** アコーディオンのクリックイベントを登録 ***/
??$(this).click(function() {

???//「opened」クラスがあれば削除、なければ付与
???$(this).toggleClass("opend")

???//アコーディオンを開閉する
???$(this).next().slideToggle();

???//アコーディオンを開いた(「opened」クラスを付与した)場合、
???//クッキーにアコーディオンナンバーを登録
???if($(this).hasClass("opend")) {
????cookie += index;
????$.cookie("accordion", cookie);

???//アコーディオンを閉じた(「opened」クラスを削除した)場合、
???//クッキーからアコーディオンナンバーを削除
???} else {
????cookie = cookie.replace(index, "");

????//クッキーにアコーディオンナンバーがない場合、クッキーを削除
????if(cookie.length == 0) {
?????$.cookie("accordion", "", {expires:-1});
????} else {
?????$.cookie("accordion", cookie);
????}
???}
??});
?});
});

$(“.accordion_title”).each(function(index) {…});
によって、一つ一つのアコーディオンタイトルに「0,1,2…」とナンバーを振っています。
「そのナンバーがクッキーに保存されているかどうか」で、アコーディオンの開閉状態を判断しています。

?

処理の流れは以下になります。

?

1.ページをロード
・クッキーの有無を判断
・クッキーがあれば、クッキーに保存されているナンバーを読み込む
・読み込んだナンバーを元に、アコーディオンの開閉状態を設定する

?

2.アコーディオンを開ける
・クッキーにナンバーを保存(数字の『文字列』としてクッキーに保存)
例)
「2」「0」「4」の順に開いた場合、
cookie += “2”;
$.cookie(“accordion”, cookie);?
cookie += “0”;
$.cookie(“accordion”, cookie);
cookie += “4”;
$.cookie(“accordion”, cookie);?

// $.cookie(“accordion”)は “204” になります。

?

3.アコーディオンを閉じる → クッキーからナンバーを削除
例)
「0」「2」の順に閉じた場合、
cookie = cookie.replace(“0”, “”);
$.cookie(“accordion”, cookie);?
cookie = cookie.replace(“2”, “”);
$.cookie(“accordion”, cookie);

// $.cookie(“accordion”)は “4” になります。

?

―――――――――――――――――――――――――――――――――――
以上で、開閉状態を記憶するアコーディオンの完成です!

?

クッキーの保持状態の確認用として、
ページロード時と開閉時にアラートを出すサンプルも用意してみましたので、よければご覧になってください。

?

アラート付きサンプル

?

※最後にご注意※
このサンプルでは、アコーディオンタイトルが10個以内(「0」~「9」)のものを想定しています。
「10」以上になると、クッキーからナンバーを削除する際、
「0」と「1」~「9」の区別がつかなくなるためです。

?

10個以上を実装する場合、クッキーに保存する文字列が以下になるよう処理を変更します。
変更前 : “0121011”
変更後 : “[0][1][2][10][11]”

?

これでクッキーから削除する際も、以下のようにすれば問題なく動作するようになります。
cookie = cookie.replace(“[0]”, “”);

(参考サイトでは後者になっています)

?

―――――――――――――――――――――――――――――――――――
cookieがjsで簡単に扱えることが伝われば幸いです。
アコーディオン以外にも広く応用できるだろうと思います。

機会があれば、是非使ってみてください!
うっちーでした。

この記事を書いた人

core-corp

入社年2010年

出身地東京都

業務内容インフラ

特技または趣味ドライブ

core-corpの記事一覧へ

テクログに関する記事一覧