Javascriptを短くしたい

質問

初歩的なことですみません。

Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、
以下のサンプル文のような形では、項目数が増えるとその分だけ
どんどんJavascriptも長くなっていってしまいます。

Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。
よろしくお願いします。

<script type="text/javascript">
<!--
function Hyo1(num)
{
if (num == 0)
{
document.getElementById("cont1").style.display="block";
}
else
{
document.getElementById("cont1").style.display="none";
}
}

function Hyo2(num)
{
if (num == 0)
{
document.getElementById("cont2").style.display="block";
}
else
{
document.getElementById("cont2").style.display="none";
}
}
// -->
</script>

<div id="cont1">ああああああ</div>
<form>
<input type="button" value="表示" onclick="Hyo1(0)">
<input type="button" value="非表示" onclick="Hyo1(1)">
</form>
<form>

<div id="cont2">いいいいいい</div>
<input type="button" value="表示" onclick="Hyo2(0)">
<input type="button" value="非表示" onclick="Hyo2(1)">
</form>

回答No.1

shiren2 · ベストアンサー

どのくらい短くしたいかにもよりますが…。

<script type="text/javascript">
<!--
function Hyo(id, visible)
{
var style = (visible ? 'block' : 'none');
document.getElementById(id).style.display = style;
}
// -->
</script>

<div id="cont1">ああああああ</div>
<form>
<input type="button" value="表示" onclick="Hyo('cont1', 1)">
<input type="button" value="非表示" onclick="Hyo('cont1', 0)">
</form>
<form>

<div id="cont2">いいいいいい</div>
<input type="button" value="表示" onclick="Hyo('cont2', 1)">
<input type="button" value="非表示" onclick="Hyo('cont2', 0)">
</form>

お礼

ありがとうございます！

説明がヘタですみません。
回答頂いたソース、とてもシンプルでまさに求めていたものです。
わからなくて困っていたので大変助かりました。

自分も勉強してこういうのススっと書けるようになりたいですー。