はてなブログで開閉コンテンツを

jQueryで。
ちなみにjavascriptはさっぱりわからないけど感で適当にやったらできました。

jQueryを導入する。

以下のサイトに書いてありました。

はてなブログにjQueryを導入してみる。

はてなブログの管理＞デザイン＞カスタマイズでサイドバーにHTMLモジュール追加して、以下を張り付ける。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

スクリプトを書く

上で追加したモジュールに、追加で開閉用のスクリプトを張り付ける。

以下のサイトに書いてありました。

jQueryを使ってアコーディオンの様な開閉できるスクリプトを作ってみた

んで、自分用にちょっと変えた。

<script type="text/javascript">
<!--
$(function(){
	$("div.hide").hide();
	$("div.collapsed").click(function(){
		var index = $("div.collapsed").index(this);
		$("div.hide").eq(index).slideToggle("fast");
	}).css("cursor","pointer");
});
-->
</script>

記事を書く

で、collapsedの範囲が選択になり、hide部分が非表示になる部分。

<div class="collapsed">
<b>ここをクリックすると隠されコンテンツが見えるよ！</b>
</div>
<div class="hide">
   <p>非表示になるコンテンツ</p>
</div>

もうちょっとなんとかなりそうな気もするけど、まあいまはいいや。

ブログの編集モードが、「見たままモード」の時は「HTML」で、「はてな記法モード」になっている場合は、タグそのまま書けば大丈夫なハズ（吐出された時、余計な

や
が挿入されるけど。

デモ

ここをクリックすると隠されコンテンツが見えるよ！

結論

なんかイマイチだ、なんでだ、気分の問題か。

推定無題

日々調べたこととか

はてなブログで開閉コンテンツを

jQueryを導入する。

スクリプトを書く

記事を書く

デモ

結論