jQueryでshow/hideが上手く行かない

入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。
入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。

<div id="input"><input type="text" name="something"></div>
<input type="button" id="button" value="hide">

以下のようにjQueryを組んでみました。

$(document).ready(function(){
if($("#button").attr("value") == "hide"){
$("#button").click(function(){
alert("VALUE=" + $("#button").attr("value")),
$("#input").children().hide(),
$("#button").attr("value", "show");
});
} else if($("#button").attr("value") == "show"){
$("#button").click(function(){
alert("VALUE=" + $("#button").attr("value")),
$("#input").children().show(),
$("#button").attr("value", "hide");
});
}
});

まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。

次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。
elseのalertまで行っているのにその後が機能しないのは何故でしょうか？

No.2 ベストアンサー 回答者： Taiyonoshizuku 回答日時： 2014/10/30 15:38

組んでみたよ。

参考までにどうぞ。

$('#button').click(function(){
$(this).val($('#input').children().toggle().is(':visible') ? 'hide':'show');
});

ここまでシンプルにできるよ。

#buttonがクリックされたら
#inputの子要素の表示非表示を切り替えて(toggle())
要素が表示だったらvalueにhide
要素が非表示だったらvalueにshow

こんな動きになってる。

この回答へのお礼

お見事です！！！
ありがとうございます！！！

お礼日時：2014/10/30 15:50

No.1 回答者： Taiyonoshizuku 回答日時： 2014/10/30 15:28

動作の動きは見ていないけど、

alert("VALUE=" + $("#button").attr("value")),
$("#input").children().hide(),
$("#button").attr("value", "show");

なんでカンマ？

この回答へのお礼

セミコロンでも同じでした...

お礼日時：2014/10/30 16:16