[html] Hide particular div onload and then show div after click

I have two divs div1 and div2. I want div2 to be automatically hidden but when i click on preview div then div2 to be made visible and div1 to hide. This is the code i tried but no luck :(

<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>

$(document).ready(function() {
    $('#div2').hide(0);
    $('#preview').on('click', function() {
        $('#div1').hide(300, function() { // first hide div1
            // then show div2
            $('#div2').show(300);
        });     
    });
});

You missed # before div2

Working Sample

At first if you want to hide div element with id = "abc" on load and then toggle between hide and show using a button with id = "btn" then,

$(document).ready(function() {
 $("#abc").hide(); 
  $("#btn").click(function() {
     $("#abc").toggle();
  });
});

The second time you're referring to div2, you're not using the # id selector.

There's no element named div2.

You are missing # hash character before id selectors, this should work:

$(document).ready(function() {
    $("#div2").hide();

    $("#preview").click(function() {
      $("#div1").hide();
      $("#div2").show();
    });

});

Learn More about jQuery ID Selectors

This is an easier way to do it. Hope this helps...

<script type="text/javascript">
$(document).ready(function () {
    $("#preview").toggle(function() {
        $("#div1").hide();
        $("#div2").show();
    }, function() {
        $("#div1").show();
        $("#div2").hide();
    });
});

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

<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>

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

• If you want the div to be hidden on load, make the style display:none
• Use toggle rather than click function.

Links:

JQuery Tutorials

• http://docs.jquery.com/Main_Page

• http://www.w3schools.com/jquery/default.asp (W3Schools)

• http://thenewboston.org/list.php?cat=32 (Video Tutorials)

• http://andreehansson.se/the-basics-of-jquery/ (Basic Tutorial)

JQuery References

• http://api.jquery.com/
• http://oscarotero.com/jquery/