【JavaScript】表示/非表示切り替えのためのコード片
2018-03-07-1
[JavaScript][Programming]
自分用メモ。
領域を表示したり見えなくしたり入れ替えたりをトグルボタンで切り替え。
定期的に同じようなの書いてるけど現状版として。
領域を表示したり見えなくしたり入れ替えたりをトグルボタンで切り替え。
定期的に同じようなの書いてるけど現状版として。
show_hide
<script>
function show_hide(id) {
if (!document.getElementById) return;
if (!document.getElementById(id)) return;
if (document.getElementById(id).style.display != "block")
document.getElementById(id).style.display = "block";
else
document.getElementById(id).style.display = "none";
}
function show_hide_class(cn) {
var es = document.getElementsByClassName(cn);
for (var i = 0; i < es.length; i++) {
if (es[i].style.display != "block")
es[i].style.display = "block";
else
es[i].style.display = "none";
}
}
</script>
<body onload="document.getElementById('b<TMPL_VAR name=ymd>').click()">
<div style="margin:1em">
<button id="b<TMPL_VAR name=ymd>" type="button" onclick="show_hide('c<TMPL_VAR name=ymd>');show_hide_class('s<TMPL_VAR name=ymd>')">
<span class="s<TMPL_VAR name=ymd>" style="display:block">見る</span>
<span class="s<TMPL_VAR name=ymd>" style="display:none">隠す</span>
</button>
</div>
<div id="c<TMPL_VAR name=ymd>" style="display:none">
[領域]
</div>
switch
[AAAAAA]
<div style="margin:1em">
<button id="b20180306" type="button" onclick="show_hide_class('s20180306')">
<span class="s20180306" style="display:block">領域A</span>
<span class="s20180306" style="display:none">領域B</span>
</button>
</div>
<div class="s20180306" style="display:block">[AAAAAA]</div>
<div class="s20180306" style="display:none">[BBBBBB]</div>