jquery change display doesnt work

Question

Question by Dmitry Makovetskiyd

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

Answer by matpol

matpol

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()
        });
    });

Answer 2

Answer by Starx

Starx

You have an markup error. A closing </div> without opening. On the first line

Next, you might want to stop using .bind() it is deprecated. You should use .on() instead.

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

Demo _{without the div}

jquery change display doesnt work

Question by Dmitry Makovetskiyd

Answer by matpol

Answer by Starx

Author: Nabin Nepal (Starx)

Please fill the form - I will response as fast as I can!