Question

I want a div to become visible, when a “button” is pressed.
Here is the html that represents the button:

<span id='dl' class='btn' data-app-id=''>DOWNLOAD<br/>FREE</span></div>

Here is the html of the div in its initial stage before the button is pressed.

<div class='box' id='dlbox' style='display:none'>
    <div class='title'>
        <span class='text'>Confirm install</span>
        <span id='x1' class='x'></span>
    </div>
    <p>Click to install </p>
    <p><?php echo "<span style='font-weight:bold'>$app->appName</span>"; ?></p>
</div>​

The jquery is this:

$("#dl").live("click", function() {
    $("#dlblank").toggle();
    $("#dlbox").toggle();
});​

The css of the div when “toggled”:

.box {
    position: absolute;
    background: #4d0404;
    opacity: none;
    z-index: 9001;
    -webkit-box-shadow: 0 5px 7px black;
    text-align: center;
    color: white;
    top: 50px;
}

Answer 1

I personally prefer to use show and hide instead toggle as it is a bit clearer what is going on. I would also put the disply none in the jquery too.

$('#dlbox').css('display':'none');   
$(document).ready(function() {   
       $("#dl").live("click", function(){
            $("#dlbox").show()
        });
    });