はてなブログでえっちな画像を隠すために導入したjQuery開閉アコーディオン

ブログにエロ画像を貼るときに、さすがにそのまま張っちゃうと見たくないのに見えちゃって不快とか、
袋とじっぽい感じでちょっと良いとか思ったので、jQueryを使用した開閉アコーディオンを導入してみました。

方法

1. [ダッシュボード]→[設定]をクリック。
2. [詳細設定]タブのheadに要素を追加に下記のコードを追加

コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>

1. 記事を書くときに例のようにdiv要素で囲む(はてな記法の場合)

例

<div class="collapsed"><span style="color: #ff0000">※18禁エロ画像閲覧注意</span>ここをクリックで表示/非表示切り替え</div>
<div class="hide">コンテンツコンテンツコンテンツ</div>

動作サンプル

※18禁エロ画像閲覧注意ここをクリックで表示/非表示切り替え