[解決済み] ロード時に特定の div を隠し、クリック後に div を表示する。

質問

私は2つのdivを持っています div1 と div2 . div2を自動的に隠したいのですが preview の後に div2 を可視化し div1 を非表示にします。これは私が試したコードですが、うまくいきません :(

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
  $("#preview").click(function() {
    $("#div1").hide();
    $("#div2").show();
  });
});
</script>

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>

解決方法は？

セレクタに注意してください。を忘れているようです。 # に対して div2 . さらに、多くの要素の表示/非表示を一度に切り替えるには .toggle() :

// Short-form of `document.ready`
$(function(){
    $("#div2").hide();
    $("#preview").on("click", function(){
        $("#div1, #div2").toggle();
    });
});

デモの様子 http://jsfiddle.net/dJg8N/