div idでひとくくりにされているときのjavascriptの挙動について

たとえば、

<div id="homu">
<div id="homu1">
<a>住所入力</a>
</div>
<div id="homu2" style="display:none">
<form method="POST" action="cgi-bin/xxx.cgi">
<div>名前：<input type="text" name="NAME"></div>
<div>住所：<input type="text" name="ADDR"></div>
<input type="submit" value="送信">
</form>
<a >キャンセル</a>
</div>
</div>

みたいなhtmlがあり、

<script type="text/javascript" src="/てきとうなパス/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(#homu).click(function() {
  if ($(homu2).css(display) == 'none') {
    $(#homu1).hide();
    $(#homu2).show();
  } else {
    $(#homu1).show();
    $(#homu2).hide();
  }
</script>

みたいなjavascriptがあったとしよう。
動かしてみたが綺麗に動作しない。

それもそのはず、
1.#homuをクリックしたらjavascriptが動くようにしているが、これだと#homu2が表示されているときは
何を押しても#homu2は消える。→#homu,#homu1,#homu2とは別に、キャンセル専用のdivとid(#cancelみたいなの)を用意しておき、
$(#cancel)でjavascriptを書く。

2. css(display)だが、homu1をクリックしているときは必ずhomu2のdisplayはnoneなはずなので、
そもそも条件分岐が必要ない。

というわけなので、コードは適当に書かずに、よく考えながらコードは書くべきなのだと学んだのであった。

正直、すごく不親切なエントリだと自覚してる。反省もしてる。