質問、解答、ノートの表示領域を拡大縮小する

使用例

次のように質問、解答、ノートを表示します。
「＋」をクリックすると表示領域が拡大されて全文が表示されます。
「－」をクリックすると、指定した高さまで文章の表示領域が縮小されます。

何をするプラグインですか。

質問「Q」、解答「A」、ノート「N」の内容を一部表示、全体表示を切りかえるプラグインです。
ここの表示が、解答「A」です。
上記のように、質問文が１行で収まり拡大、縮小の必要がない場合「+」を押しても「＋」「－」が切り替わるだけです。

基本的な使い方を教えてください。

<head></head>内のJavascriptで、
$(".TxtQtion,.TxtAns,.TxtNote").DispBlkNonQAN();

html内に次のように記載します。
<div class="TxtQtion">
ここに質問を記載。
</div>
class="TxtQtion"で、質問「Q」
class="TxtAns"で、解答「A」
class="TxtNote"で、ノート「N」
となります。
なお、このクラス名は、デフォルトのcss「jqDispBlkNonQAN.css」で使用している名前です。
「Qtion」「Ans」「Note」の文字列によって、質問、解答、ノートを判断しています。
class="Txt2Qtion"などとしても質問として扱われます。
この様な場合、Txt2Qtionのcssを記載して体裁を整えることになります。

　　ここは、class="TxtNote"のDivです。
<div class="TxtNote" とすることにより「N」と表示されます。
文字色、背景色は、「jqDispBlkNonQAN.css」に定義されている内容に基づいています。

初期状態での表示高さは、
全体の高さ
$(".TxtQtion,.TxtAns,.TxtNote").DispBlkNonQAN({"defaReduH":"30"});
などと指定します。

また、「Q」「A」「N」以外のタイトルを表示したい場合、
それぞれのdivの定義で次のように行います。
<div class="TxtNote" reduH=100 ttl="メモ">
このようにすると、「メモ」と表示されます。

使い方

動作のサンプルを兼ねての説明です。
つまり、htmlは次のように記載することになります。

				基本として、
				<div class="TxtQtion">
				<div class="TxtAns">
				<div class="TxtNote">
				
				要素を渡す記載方法、
				縮小時表示高さを指定
				<div class="TxtNote" reduH=100>
				縮小時表示高さ、表示するタイトルを指定
				<div class="TxtNote" reduH=100 ttl="メモ">

実行方法。Javascript記載方法。

				jQuery(function($){
					//デフォルトでの実行方法
					$(".TxtQtion,.TxtAns,.TxtNote").DispBlkNonQAN();	//質問、答え、ノートの表示、非表示
				});

その他、オプションを指定しての実行方法

//縮小時表示高さを指定しての実行方法
$(".TxtQtion,.TxtAns,.TxtNote").DispBlkNonQAN({"defaReduH":"30"});
defaReduHのデフォルト値は「30」です。

//拡大縮小に要する時間の掛け率を指定しての実行方法
$(".TxtQtion,.TxtAns,.TxtNote").DispBlkNonQAN({"oddsTime":"2"});
拡大縮小に要する時間は次のように計算します。
（拡大時高さ－縮小時高さ）*掛け率
掛け率を大きく指定するほどゆっくりな動きとなります。
oddsTimeのデフォルト値は「2」です。

以下がソースです。コピペしてご使用ください。

*.jsファイルの内容です。

つぎは、cssファイルの内容です。

jqShowSrcCode.cssファイルの内容です。