(0)
(0)Ajax JQueryプラグイン：コンテンツの展開&折りたたみ
自分用のHTML製作メモ(・ω・)
文章が長くなったりした任意のコンテンツの折りたたみ、展開用のAjaxです。
（１）外部javascript『slidecontens.js』作成
テキストエディターで、下記を記入後「slidecontens.js」の名称でファイル保存
$(function() {
$('div.collapsePanelHeader').toggle(
function() {
$(this).next('div.content').show('slow');
$(this).children('div:last').removeClass('expand').addClass('close');
},
function() {
$(this).next('div.content').hide('slow');
$(this).children('div:last').removeClass('close').addClass('expand');
});
});
（２）「slidecontens.js」を任意のフォルダに設置・呼び出し（今回は jsフォルダ）
HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す
※jQuery本体は、グーグル先生からソースいただいています(*´ω｀*)
ver.1.3とver.1.6で動作確認済み
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6");</script>
<script src="ドメイン名/js/slidecontens.js" type="text/javascript"></script>
</head>
（３）折りたたみをする場所に呼び出しコードを貼りつけ
<div class="containerPanel">
<div class="collapsePanelHeader">
<div class="headerContent">
<a href="#">エーベルジュ</a>
</div>
<div class="arrow expand"></div>
<!-- class="collapsePanelHeader" --></div>
<div class="content" style="display: none">
DLC「反逆のヴァルキュリア」内の「艦上のヴァルキュリア」のエース撃破で入手できる剣で、2でユリアナが所持していた大剣。
2ではDLC「激戦！メルフェア市EX」のエース撃破報酬で鹵獲武器として入手可能で、最強の剣として剣甲猟兵共々猛威を振るった。
3での剣甲兵弱体化の煽りをうけてか、本作では能力的にいまいちパッとしない性能に抑えられている。
<!-- class="content" --></div>
<!-- class="containerPanel --></div>
※文章例は「戦場のヴァルキュリア3 攻略Wiki」より引用
上記例だと、表題「エーベンルジュ」が開閉ボタンになります。
aタグが無くても動作はするのですけど、合ったほうがボタンとして分かりやすいので追加アレンジしています(＝ω＝)
class名を変えるときは、javascriptの対応する記述も変更しましょう。
■参考サイト様
JavaScript + Ajax 実践サンプル集
http://jsajax.com/Articles/collapsiblepanel/1334
2012年5月21日 17:59に投稿されたエントリーページです。
RSS2.0