CSS：詳細を表示


上のボタンをクリックすると詳細が表示されます。もう一度クリックすると非表示になります。必要な情報だけ見たい場合に、 このやり方は役に立ちます。項目が多くなりがちなので、簡単に項目が増やせる方法を考えました。以下、ソースです。 
<!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の内容です。

 </div>

 <input type="button" id="btn_div2" value="詳細を表示" onclick="show('div2')"><br>
 <div id ="div2" style="display: none;">
   dv2の内容です。

</div>

</body>
</html>
実装する機能は、 ボタンをクリックするごとに、
１． <div>内の内容の表示/非表示
２．ボタンの詳細の表示/非表示
次のようにデータを定義します。 今回はdivとボタンなので、
divのidはdiv1のように命名
ボタンはbtn_div1とdivのidにbtn_を付けてdivと関連付けをする
これにより、項目が増えても１つの関数で対応できるようにする。 

<input type="button" id="btn_div1" value="詳細を表示" onclick="show('div1')"><br>
<div id ="div1" style="display: none;">
関数showの引数にdiv1使っています。関数本体では、

 function show(element){
var btn_name = "btn_" + element;
var btn = document.getElementById(btn_name);
var div = document.getElementById(element);
引数を使ってボタンのidを取得しています。そして、ボタンの要素を取得します。これでボタン名の変更とdivの表示/非表示ができます。