上のボタンをクリックすると詳細が表示されます。もう一度クリックすると非表示になります。必要な情報だけ見たい場合に、 このやり方は役に立ちます。項目が多くなりがちなので、簡単に項目が増やせる方法を考えました。以下、ソースです。 <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>sample</title> <script> function show(element){ var btn_name = "btn_" + element; var btn = document.getElementById(btn_name); var div = document.getElementById(element); if(div.style.display == 'none'){ div.style.display = 'block'; btn.value = "詳細を非表示"; } else { div.style.display = 'none'; btn.value = "詳細を表示"; } } </script> </head> <body> <input type="button" id="btn_div1" value="詳細を表示" onclick="show('div1')"><br> <div id ="div1" style="display: none;"> dv1の内容です。実装する機能は、 ボタンをクリックするごとに、 1. <div>内の内容の表示/非表示 2.ボタンの詳細の表示/非表示 次のようにデータを定義します。 今回はdivとボタンなので、 divのidはdiv1のように命名 ボタンはbtn_div1とdivのidにbtn_を付けてdivと関連付けをする これにより、項目が増えても1つの関数で対応できるようにする。
関数showの引数にdiv1使っています。関数本体では、
引数を使ってボタンのidを取得しています。そして、ボタンの要素を取得します。これでボタン名の変更とdivの表示/非表示ができます。 |