Hide particular div onload and then show div after click

click, html, jquery

Solution

Make sure to watch your selectors. You appear to have forgotten the `#` for `div2`. Additionally, you can toggle the visibility of many elements at once with `.toggle()`:

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

Demo: http://jsfiddle.net/dJg8N/

Problem

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

Original source