ブログでも簡単に使えるJavaScript：②クリックで表示する

f:id:kay72234:20150825202947j:plain

■はじめに

ブログでも簡単に使えるJavaScriptということで、前回はメッセージボックスを表示するスクリプトを紹介しました。

第２回の今回は、クリックすると隠していた文字列や画像を表示する仕組みを紹介します。
まずはサンプルからご覧ください。

■サンプル１

基本形です。次のリンクをクリックすると、隠しておいた文字列を表示します。

クリックしてください

■サンプル２

実用的使い方のサンプルです。表示する対象に表を使用することもできます。

●問題１

次のうち、阪神タイガース在籍時代に最もホームランを打った選手は誰？

１：藤村富美男
２：田淵幸一
３：掛布雅之
４：ランディ・バース

解答を表示する

■サンプル３

画像データでも同じように使用することができます。

クリックすると画像を表示します

■ソースコード

まずサンプル１のソースコードです。

<!-- クリックする文字列 -->
<div onclick="obj=document.getElementById('A0001').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">クリックしてください</a>
</div>
<!--// クリックする文字列：ここまで -->

<!-- 隠しておく部分 -->
<div id="A0001" style="display:none;clear:both;">
クリックするとここが表示されます
</div>
<!--// 隠しておく部分：ここまで -->

上記のソースコードをはてな記法の編集エリアに貼り付ければOKです。「クリックしてください」と「クリックするとここが表示されます」の部分は任意に変更してください。
「A0001」は、クリックする文字列の部分と折り畳んで隠している部分を紐付けるためのIDのようなものです。一つのページの中に複数この仕組みを組み込む場合は、それぞれ別の文字列にしてください。

続いてサンプル２です。
日本語は省略してコンパクトにしています。

<!-- クリックする文字列 -->
<div onclick="obj=document.getElementById('A0002').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">解答を表示する</a>
</div>
<!--// クリックする文字列：ここまで -->

<!-- 隠しておく部分 -->
<div id="A0002" style="display:none;clear:both;">
|正解は「３：掛布雅之」選手です。|
</div>
<!--// 隠しておく部分：ここまで -->

最後にサンプル３です。

<!-- クリックする文字列 -->
<div onclick="obj=document.getElementById('A0003').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">クリックすると画像を表示します</a>
</div>
<!--// クリックする文字列：ここまで -->

<!-- 隠しておく部分 -->
<div id="A0003" style="display:none;clear:both;">
|[f:id:kay72234:20150824222948j:plain]|
</div>
<!--// 隠しておく部分：ここまで -->