JavaScriptを使って、ボタンや要素のクリック時に画面に要素を表示させる方法です。
document.getElementById(“id”).～
「document.getElementById」を使って、要素のidを取得します。
下記のように指定すると、buttonや何か要素をクリックした時にidを取得してCSSのプロパティ値を変更してくれます。
document.getElementById("clickbtn1").style.display = "block";こちらをベースに、ボタンをクリックしたタイミングで要素を表示させます。
display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
https://developer.mozilla.org/ja/docs/Web/CSS/display
要素を非表示にしておく（display:none）
まずは、画面に表示されないように、予め要素を非表示にしておきます。こちらは画像でもdiv要素でもOKです。
<div style="width:200px;height:200px;background:black;"></div>これで黒色の四角形が表示されるので、display:noneで予め非表示にしておきます。
<div style="width:200px;height:200px;background:black;display:none;"></div>画面から非表示になりました。
あとは、こちらのブロックにidを加えておきます。
<div style="width:200px;height:200px;background:black;display:none;" id="clickbtn1"></div>クリックで関数を実行させる
別のdiv要素にonclick（click イベント）を設置します。
<div style="width:200px;height:40px;background:skyblue;" onclick="clickDeView()">ここを押してね！</div>ここを押してね！
これで、このボタンをクリックした時に、clickDeViewという関数を実行させることができます。
クリックでCSSが書き換わるJavascript
あとは、clickDeViewの関数内で、CSSを書き換えてあげれば完成です。
[rml_read_more]
<div style="width:200px;height:40px;background:skyblue;" onclick="clickDeView()">ここを押してね！</div>
<div style="width:200px;height:200px;background:yellow;display:none;" id="clickbtn1">表示されました！</div>
<script>
function clickDeView(){
document.getElementById("clickbtn1").style.display = "block";
}
</script>実行してみます。
ここを押してね！
これで、要素をクリックすると、要素の表示・非表示が切り替わります。
まとめ
このような感じで、document.getElementById(“clickbtn1”).style.displayという方法を使うと、画面の要素の表示・非表示を切り替えることができます。
ご参考ください😃
