Show hidden div containing input buttons

Question

I'm currently trying to a show hidden <div> that includes two input buttons after clicking a button.

Here's my HTML;

// Button to show <div>
<input type="button" value="Show" id="show" class="show"/>

<div id="hiddenDiv" style="font-size:20px;">                                    
    <input type="button" class="btn-default" id="button1" />                                                                 
    <input type="button" class="btn-default" id="button2" />                                                                                                                
</div>  

jQuery;

  $("#hiddenDiv").hide();
    $("#show").click(function () {
        $("#hiddenDiv").animate({ "opacity": "show", "top": "250px" }, "slow");
    });

I can't get the input buttons to show up after clicking the show -button. Any idea why this is happening?

Answer 1

Since you are running your JavaScript before the html has loaded you need to place the code in a ready() event which will trigger once the html has loaded on the page.

<script>
    $( document ).ready(function() {
        $("#hiddenDiv").hide();
        $("#show").click(function () {
            $("#hiddenDiv").animate({ "opacity": "show", "top": "250px" }, "slow");
        });
    });
</script>
<input type="button" value="Show" id="show" class="show"/>

<div id="hiddenDiv" style="font-size:20px;">                                    
    <input type="button" class="btn-default" id="button1" />                                                                 
    <input type="button" class="btn-default" id="button2" />                                                                                                                
</div>  

For more information on the ready() event see the documentation:

https://learn.jquery.com/using-jquery-core/document-ready/