読者です 読者をやめる 読者になる 読者になる

無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

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

f:id:kay72234:20150825202947j:plain

■はじめに

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

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

■サンプル1

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



■サンプル2

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


●問題1

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

1:藤村富美男
2:田淵幸一
3:掛布雅之
4:ランディ・バース




■サンプル3

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



■ソースコード

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

<!-- クリックする文字列 -->
<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のようなものです。一つのページの中に複数この仕組みを組み込む場合は、それぞれ別の文字列にしてください。


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

<!-- クリックする文字列 -->
<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;">
|正解は「3:掛布雅之」選手です。|
</div>
<!--// 隠しておく部分:ここまで -->


最後にサンプル3です。

<!-- クリックする文字列 -->
<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>
<!--// 隠しておく部分:ここまで -->



■さいごに

他にも、ネタばれを含む文書を隠しておいて、読みたい人はクリックすれば表示するといった使い方もできますね。
ちょっとした仕掛けですが、工夫すれば使い方はいろいろあると思います。


2015.9.26追記
実際、記事中でも使っています。こちらのエントリなどを参考ください。


スポンサーリンク