「jQuery Sliding Panels」 設置説明
無駄な長い前置きを見る
またまた、とあるサイトでステキなプラグインを見かけてしまった（moreタグの「続きを読む」の下に下がる時の動きが・・・うにょ～～んって感じで下がるやつ）・・・またまた、それが何なのか探しまくって何とか発見！！・・・実は、自分もすでに使っていたプラグイン（Content with show/hide javascript for "more"）のカスタマイズ品でした・・・σ(^◇^;)ヒヤアセ
早速、自分もまねてやってみると・・・！！ｏ（＾＾ｏ）（ｏ＾＾）ｏ おおおぉ！！
最近そんなことばかりで気が付けばプラグインがいっぱい・・・そのうち、何が入っているか書いてみよう・・・・
・・・その後事件はおきました、(T^T) ふと画像を表示させて見ると・・・・（￣□￣；）！！ lightbox が（「jQuery」シリーズ全て）！！・・・動作不能になってるではありませんか～～！！！ ｡･ﾟﾟ･(×_×)･ﾟﾟ･｡
また相性みたいな問題発生ですか・・・・喧嘩はいけません・・・・その後なんとかならんか？？と非常にがんばって見るも、無駄に時間を費やしただけでした・・・・(TOT)
結局、重要な方の「jQuery」シリーズを残すことに・・・lightbox のみなら highside もステキだなぁ～と思っていたので良かったのですが・・・・thickbox & corner は絶対外せないので折角の「うにょ～～ん」はまた取り外す羽目に・・・・
・・・その後しばらく考える・・・
諦めきれん！！！ (」゜ロ゜)」(」゜ロ゜)」(」゜ロ゜)」オオオオオッッッ
代替品になるものは無いかと探してみた・・・見つけたのは Ajax Spoiler ・・・しかしこれも「jQuery」シリーズが使えなくなる・・・対策があったが、やってもダメでした・・・・（Ｔ＿Ｔ）
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・(T^T)
さらに諦めずに探すと、使用目的はなんか違うが何とかなリそうなものを発見！！ しかもこれなら多分大丈夫そうだ！！・・・なぜならば～「jQuery」シリーズだからさぁ～！！
早速設置してみる・・・・あら？ あっさり何も問題なく設置完了 σ(^◇^;)ヒヤアセ
後はこれを more に使えるようにカスタマイズすればいいのであった・・・・
・・・・ながぁ～～～い、前置きでしたが
早速、自分もまねてやってみると・・・！！ｏ（＾＾ｏ）（ｏ＾＾）ｏ おおおぉ！！
最近そんなことばかりで気が付けばプラグインがいっぱい・・・そのうち、何が入っているか書いてみよう・・・・
・・・その後事件はおきました、(T^T) ふと画像を表示させて見ると・・・・（￣□￣；）！！ lightbox が（「jQuery」シリーズ全て）！！・・・動作不能になってるではありませんか～～！！！ ｡･ﾟﾟ･(×_×)･ﾟﾟ･｡
また相性みたいな問題発生ですか・・・・喧嘩はいけません・・・・その後なんとかならんか？？と非常にがんばって見るも、無駄に時間を費やしただけでした・・・・(TOT)
結局、重要な方の「jQuery」シリーズを残すことに・・・lightbox のみなら highside もステキだなぁ～と思っていたので良かったのですが・・・・thickbox & corner は絶対外せないので折角の「うにょ～～ん」はまた取り外す羽目に・・・・
・・・その後しばらく考える・・・
諦めきれん！！！ (」゜ロ゜)」(」゜ロ゜)」(」゜ロ゜)」オオオオオッッッ
代替品になるものは無いかと探してみた・・・見つけたのは Ajax Spoiler ・・・しかしこれも「jQuery」シリーズが使えなくなる・・・対策があったが、やってもダメでした・・・・（Ｔ＿Ｔ）
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・(T^T)
さらに諦めずに探すと、使用目的はなんか違うが何とかなリそうなものを発見！！ しかもこれなら多分大丈夫そうだ！！・・・なぜならば～「jQuery」シリーズだからさぁ～！！
早速設置してみる・・・・あら？ あっさり何も問題なく設置完了 σ(^◇^;)ヒヤアセ
後はこれを more に使えるようにカスタマイズすればいいのであった・・・・
・・・・ながぁ～～～い、前置きでしたが
設置方法
こちらのページから「jQPanels」をダウンロード・・・もちろん、jquery.js も入手してください。
そして、すべてのファイルを適当なフォルダ（ここでは、jquery-panels）に入れFTPで任意の場所（ここではwp-admin等と同じ最上層にします）にアップロード。
※ちなみに jQuery シリーズを設置済みの場合は、「jquery.js」は使い回しができるのでいりません。
関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>～</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。<link rel="stylesheet" href="http://example.com/jquery-panels/jquery.panels.css" type="text/css">
<script src="http://example.com/jquery-panels/jquery-1.2.1.js" type="text/javascript"></script>
<script src="http://example.com/jquery-panels/jquery.slidepanel.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名').slidePanel();
});
</script>
<script src="http://example.com/jquery-panels/jquery-1.2.1.js" type="text/javascript"></script>
<script src="http://example.com/jquery-panels/jquery.slidepanel.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名').slidePanel();
});
</script>
緑色の部分に「Sliding Panels」を適用させたいクラス名を指定
使用例
上記の緑の文字を「'.test'」とした時の例<p class="test">サンプル １</p>
<div>隠れる文字列</div>
<div>隠れる文字列</div>
サンプル １
隠れる文字列
ちなみに、「pタグ」じゃ無くてもOKです。
その他オプションとして下記みたいな事も出来ます。
サンプル ２
<script type="text/javascript">
$(document).ready(function(){
$('.class名').slidePanel({status:'open'});
});
</script>サンプル ３－a
<script type="text/javascript">
$(document).ready(function(){
$('.class名').slidePanel({role:'accordion'});
});
</script>（３－A＆B＆Cそれぞれ要素に同じclass名を付ける。）
サンプル ３－b
ここは最初閉じてる
３－Bをクリックすると
他は閉じて
ここだけが開く
３－Bをクリックすると
他は閉じて
ここだけが開く
サンプル ３－c
ここも最初閉じてる
３－Cをクリックすると
他は閉じて
ここだけが開く
３－Cをクリックすると
他は閉じて
ここだけが開く
・・・本当はデフォルトではBGカラーが表示されるのですが、私の事情により消されています・・・見にくくてごめんなさい。 ペコリ(o_ _)ｏ))
無駄な後置き？を見る
・・・そして自分はこれを設置後、四苦八苦しながら改良を重ね？このページの一番最初の「続きを読む ＆ 続きを隠す」を作成しましたとさ・・・・σ(^◇^;)ヒヤアセ ・・・・「続きを読む」で開いた時に、一番下にも「続きを隠すを」出来るようにしたく、がんばったのですが自分の知識では無理でした・・・・(T^T)
追記・・・その後「prototype.js と jQuery の競合」が、こちらで解決したため使用しなくなってしまいました。 ・・・しかし使わないのは勿体無いので、標準テーマ（コルベット）のサイドバーに使用してみました。 （＾∀＾） ・・・このページのサイドバーは違います。 （＾∀＾2）、 ちなみに、ここのサイドバーは、「Dockingbox」です。
人気度 : 2 %
最上階
1階