WordPressでjQuery

パネルを展開／折りたたむ

がとても参考になりました。

[sourcecode language=”html” firstline=””]
<div class="containerPanel"><!– containerPanel –>
<div class="collapsePanelHeader">
<h3>タイトル</h3>
</div>
<div class="content" style="display: none">
<p>詳細コラム本文</p>
</div>
</div><!– containerPanel –>
[/sourcecode]
[sourcecode language=”php” firstline=””]
<script>
jQuery(function() {
jQuery(‘div.collapsePanelHeader’).toggle(
function() {
jQuery(this).next(‘div.content’).show(‘slow’);
},
function() {
jQuery(this).next(‘div.content’).hide(‘slow’);
}
);
});
</script>
[/sourcecode]

目次を出したい位置に、以下のxhtmlを書いておく。

[sourcecode language=”html” firstline=””]
<div id="toc"></div>
[/sourcecode]
[sourcecode language=”php” firstline=””]
<script>
jQuery(function() {
var myToc = jQuery("#toc");
myToc.append(‘<ul>’);
jQuery(".containerPanel h3").each(function(i) {
var current = jQuery(this);
current.attr("id", "title" + i);
myToc.append("<li><a id=’link" + i + "’ href=’#title" + i + "’>" + current.html() + "</a></li>");
});
myToc.append(‘</ul>’)
});
</script>
[/sourcecode]

その仮想環境は、今のところ、携帯電話。
パソコン向けに見やすさや使いやすさを求めても、携帯電話では逆に冗長になる部分があります。
Ktai Style (携帯対応プラグイン)のおかげで、ブログが簡単に携帯に対応できてしまうので、なおさら、１つのエントリーの中で、ＰＣと携帯など、異なる環境を意識しないといけない今日この頃。
javascriptが動作するかが、１つの分岐点＝目安として、xhtmlでベースの情報を記述し、jQueryで装飾するって感じがやっとこさっとこ出来るようになってきました。
このブログじゃ、ほとんど使う予定無いけど 🙄

しかも、肝腎のクライアントのブログでも、クライアントの意識が低すぎて、まったく評価されてないけど。

このエントリーで動作しているスクリプト。

[sourcecode language=”php” firstline=””]
<script type="text/javascript">
jQuery(function() {
jQuery(‘div.expand’).text(‘●詳細を見る’)
.css("textDecoration","underline");
jQuery(‘div.collapsePanelHeader’).toggle(
function() {
jQuery(this).next(‘div.content’).show(‘slow’);
jQuery(this).children(‘div.expand’).text(‘詳細を閉じる’);

},
function() {
jQuery(this).next(‘div.content’).hide(‘slow’);
jQuery(this).children(‘div.close’).text(‘詳細を見る’);
}
);

var myToc = jQuery("#toc");
myToc.append(‘<ul>’);
jQuery(".containerPanel h3").each(function(i) {
var current = jQuery(this);
current.attr("id", "title" + i);
myToc.append("<li><a id=’link" + i + "’ href=’#title" + i + "’>" + current.html() + "</a></li>");
});
});
</script>
[/sourcecode]