, wie man einzelne Box minimieren nach Anfügen Funktion Schaffung

Question

Ich habe einige Chat boxes.after der Box creation.how die einzelnen Boxen zu minimieren

$(document).ready(function(){ 
 
    $("a").click(function(){ 
 
    var name = $(this).html(); 
 
    var user ='<div id="mainchat"><button id="min"> min</button><br>'+name+'</div>'; 
 
    $("#demo1").append(user); 
 
    return false; 
 
    }); 
 
}); 
 
// minimize the individual box 
 
$(document).on('click', '#min', function(){ 
 
    $(this).find("#mainchat").toggle(700);// its not working. 
 
    //$("#mainchat").toggle(700) applied this code,first box only was minimized. 
 

 
});

#mainchat 
 
{ 
 
    position :relative; 
 
    float:left; 
 
    top:10px; 
 
    left:50px; 
 
    margin right:10px; 
 
    height:250px; 
 
    width:100px; 
 
    border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="#">first</a><br> 
 
<a href="#">second</a><br> 
 
<a href="#">third</a> 
 

 
<p id ="demo1"></p>

bitte helfen Individuum minimieren auf einzelne boxes.When klicken minimieren buttons.thanks im Voraus

Answer 1

nur soviel bearbeiten, da finden sich nur auf das Kind Element zu zeigen, funktioniert:

hier sehen: https://jsfiddle.net/r84dw7t3/

// minimize the individual box 
$(document).on('click', '#min', function(){ 
    $(this).parent("#mainchat").toggle(700); 
});