CODEWITHSUNDEEP
jqueryhtml
user3446643
user3446643

Reputation: 15

Use jQuery to display html div couple time

I have this page where a box are hidden . this is it:

<html>
<head>
<style>
.window {
    display:none;
    background: rgba(0,0,0,.4);
    width: 400px; height: 245px;
    margin: 50px auto;
    padding: 15px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
function show() {
    $(".window").fadeIn();
    return false;
}
</script>
</head>
<body>
<button  onclick="show()">show</button>
<div class="window">ff</div>
</body>
</html>

so when i click the button, it shows a window. what i want is when i click 3 time the button i want 3 windows to appear

Upvotes: 0

Views: 64

Answers (3)

Kiran
Kiran

Reputation: 20313

Hope you are trying to show div on first click and then from second click onwards clone div and add it to DOM.

Try this:

$(document).ready(function(){
    $('button').click(function(){
        if($('.window').css('display')=='none'){
           $(".window").fadeIn(); // fadeIn div for first click
        }else{
            $(".window:first").clone().appendTo(document.body); // clone div and add it to DOM from second click onwards
        }
    });
});

DEMO

Upvotes: 2

Arsen Ibragimov
Arsen Ibragimov

Reputation: 435

If you want 3 windows you should firstly create them. This function create new window class block and then fade it in:

  $("button").on("click",function(){
    $("button").after('<div class="window">'+Math.random()*3+'</div>');
    $(".window").fadeIn();
  });

Here's jsbin: http://jsbin.com/hubahiqa/2/edit

Upvotes: 0

joonas.fi
joonas.fi

Reputation: 8236

If I understood you correctly, each time show() is called, you need to add a new DIV to the DOM.

I think you could do it like this:

$('.window:first').clone().appendTo(document.body).fadeIn();
return false;

Here's jsfiddle: http://jsfiddle.net/sJLwD/

p.s. Next time, please make jsfiddle so your question is easier to work with.

Upvotes: 0

Related Questions