【Javascript】【PHP】ボタンで表示/非表示をコントロールする方法

（2022.1.18　記）

「”削除フラグ”が立っているデータはリスト表示時に初期で非表示にし、表示ボタンを押すと表示されるようにしたい」という要望があったので実装た時の忘備録です。

簡単に言うと、以下のような動きをするやつです。

＜初期表示＞

＜表示ボタンを押すと・・・＞

＜非表示ボタンを押すと→初期表示へ＞

表示/非表示させる範囲やタイミングを変えれば、色々応用できると思います。

（全行程の所要時間：コピペで終わり）

０．実行環境
１．実装方法
２．最後に

０．実行環境

■実行環境

・さくらVPN（メモリ：１GB、CPU：２コア、SSD：１００GB）

・LinuxOS：Ubuntu18.04

・Apache：2.4

・MySQL：5.7

・PHP：7.2→7.4（2024.9.11）

１．実装方法

①以下の文を<script>タグで囲ってあげて、</body>の直前にコピペ

//コンテンツの非表示
function hideItem() {
document.getElementById('text1').style.display = "none";  //テキストエリアの非表示
document.getElementById('hide').style.display = "none";  //非表示ボタンの非表示
document.getElementById('disp').style.display = "";  //表示ボタンの表示
}

//コンテンツの表示
function dispItem() {
document.getElementById('text1').style.display = "";  //テキストエリアの表示
document.getElementById('hide').style.display = "";  //非表示ボタンの表示
document.getElementById('disp').style.display = "none";  //表示ボタンの非表示
}

上記をコメント分を除いて１行目から説明すると・・・

１：引数、帰り値無しの関数定義

２：IDが”text1″の要素について、「style=”display:none;”」を付与（非表示にする）

以下同文です。

「display=””」にすると、表示するという意味になります。

「dispItem()」も同様ですね。

表示ボタン、非表示ボタンに、それぞれ上記の関数を割り当てることで、処理が流れるようにします。

②HTMLを書き記す

<textarea id="text1" style="display: none;">表示されてるよー</textarea><br /><br /><br />
<button id="hide" onclick="hideItem(); return false;" style="display: none;">非表示</button>
<button id="disp" onclick="dispItem(); return false;" >表示</button>

上記をコメント分を除いて１行目から説明すると・・・

１：テキストエリアの定義（式で非表示）（<br />は改行の意）

２：非表示ボタンの定義（初期で非表示）→クリックイベントを列記

３：表示ボタンの定義→クリックイベントを列記

それぞれのボタンを押すと、それぞれのボタンに記載の「onclick」処理が走ります。

以上。