inaz inaz - 2 months ago 8
HTML Question

How to append element multiple times (slidingdown)

I want to append 5

li
elements when I click to div with class
moree
.
It's working correctly, but when I click to more I want to add those buttons at the end of the list. Now the items are at the begging.
Furturmore is there a way to append with effect slidingdown?
Here is my snippet:



$(document).ready(function () {
for (var i = 0; i < 5; i++) {
$(".moree").click(function () {
$(this).closest('.content').append('<ol ><li>Title 2</li></ol>');
});
}

});

ol > li {
list-style:none;
padding-top:10px;
border:1px solid green;
margin-top:10px;
}
.moree {
width:30px;
background:yellow;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="content">
<ol>
<li>title</li>
<div class="moree">Add 5</div>
</ol>
</div>
</body>
</html>





Thanks.

Answer

Did you mean this? Its only slightly improved your example with slide down animation.

$(document).ready(function () {
  $(".moree").click(function () {
    var delay = 0;
    for (var i = 0; i < 5; i++) {              
      $(this).prev('ol').append('<li style="display:none">Title 2</li>');
      $('ol li:last').delay(delay).slideDown();
      delay += 400;
    }
  });
});
ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 5</div>
    </div>
</body>
</html>