スキンはサイドバー(スマホは下部)から変更可!

アコーディオン【オリジナル】

スタイル

アコーディオンです。オリジナルになります。利用するにはプラグイン「AddQuicktag」を導入する必要があります。

AddQuicktagの導入方法は下記記事をご覧ください。

重要

同じページで複数使うときは少しコードを変更しなければいけません。

アコーディオン

文字を一時的に非表示にしたいときなどに使ってください。「クリック!」の文言も変更可能です。



見たね・・・!見てしまったね・・・!

画像も隠せます。



やぁ!

テキストエディタの方が編集しやすいですがビジュアルエディタでも可能です。

コード

<div class="hidden_box"><label for="label1">ここにタイトルを入力</label>
<input id="label1" type="checkbox" />
<div class="hidden_show">
<!--非表示ここから-->
ここに非表示にしたいテキストや画像など
<!--ここまで-->
</div>
</div>

複数回使いたい場合

複数回使いたい場合は「label1」と書かれているところを変更する必要があります。テキストエディタで編集してください。

例:

一つ目

<div class="hidden_box"><label for="label1">一つ目のアコーディオン</label>
<input id="label1" type="checkbox" />
<div class="hidden_show">
<!--非表示ここから-->
コンテンツ
<!--ここまで-->
</div>
</div>

二つ目

<div class="hidden_box"><label for="label2">二つ目のアコーディオン</label>
<input id="label2" type="checkbox" />
<div class="hidden_show">
<!--非表示ここから-->
コンテンツ
<!--ここまで-->
</div>
</div>

名前はなんでも構いませんが<label for=”label1“>と<input id=”label1” type=”checkbox” />の名前を同じにする必要があります。

コメント

  1. […] […]