Добавить div ниже другого div

Question

У меня есть требование добавить 5 разделов по одному на каждый щелчок кнопки div. (новый div должен быть добавлен ниже существующего div) Я сделал код, но новости привязаны к верхней части существующего div. пожалуйста, помогите исправить это. У меня есть еще одна кнопка, которая удаляет добавленные divs один за другим (новые, которые нужно удалить первым) вот мой код.

<div class="clearFix"></div> 
    <div id="containershowmore" > 
     <div id="dragbtnmore" style="cursor: default;">Show more buttons</div> 
     <div id="dragbtnless" style="cursor: default;">Show Fewer buttons</div> 
    </div> 

<div class="toAdd" style="display:none;" > 
       <div id="dragdashboardmain" style="cursor: pointer;">dash</div></div> 
    <div class="toAdd" style="display:none;" > 
     <div id="dragrcalendar" style="cursor: pointer;">Calendar</div></div> 
    <div class="toAdd" style="display:none;"> 
     <div id="dragresourcelist" style="cursor: pointer;">Rlist</div></div> 
    <div class="toAdd" style="display:none;"> 
     <div id="dragdailynotes" style="cursor: pointer;">D Notes</div></div> 
    <div class="toAdd" style="display:none;"> 
     <div id="dragweeklynotes" style="cursor: pointer;">W Notes</div></div> 

сценарий:

$("#dragbtnmore").click(function() { 
     $('.toAdd').each(function() { 
      if ($(this).css('display') == 'none') { 
       $(this).css('display', 'block'); 
       return false; 
      } 
     }); 
     var i = 0; 
     $('.toAdd').each(function() { 
      if ($(this).css('display') != 'none') { 
       i++; 
      } 
     }); 
     if (i == 5) 
      $('#dragbtnmore').click(function() { return false; }); 
    }); 
    $("#dragbtnless").click(function() { 
     $('.toAdd').each(function() { 
      if ($(this).css('display') == 'block') { 
       $(this).css('display', 'none'); 
       return false; 
      } 
     }); 
     var i = 0; 
     $('.toAdd').each(function() { 
      if ($(this).css('display') != 'block') { 
       i++; 
      } 
     }); 
     if (i == 5) 
      $('#dragbtnless').click(function() { return false; }); 
     $('#dragbtnless').click(function() { return true; }); 
    }); 

    $("#containershowmore").mouseleave(function() { 
     $(this).hide(); 
    }); 
    function showmore() { 
     document.getElementById('containershowmore').style.display = "block"; 
    } 

стиль:

#containershowmore 
{ 
    margin-top: -75px;position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1; 
width: 125px; 
float: right; 
padding-left: 5px; 
} 

.toAdd 
{ 

background-color: blue; 
margin-top: -55px; 
position: relative; 
margin-bottom: 14px; 

} 

*I referred this Fiddle *

** Решение: Thankyou Шивам Чопра за помощь мне. Благодаря тонну!! :)

для других, вот решение **

jsfiddle.net/coolshivster/YvE5F/12 

Answer 1

Удалить запас сверху от обоих дел.

#containershowmore 
{ 
position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1; 
width: 125px; 
    float:right; 
padding-left: 5px; 
} 
#dragbtnmore{ 
    margin-bottom:10px; 
    border:1px solid black; 
} 

.toAdd 
{ 
height:20px; 
    width:70px; 
background-color: blue; 
position: relative; 
margin-bottom: 14px; 

} 

Тогда он будет работать соответствующим образом. Здесь код: http://jsfiddle.net/coolshivster/YvE5F/

Я переписал ваш код в соответствии с вашими требованиями. Некоторые пояснения о коде

• У меня есть создать Div элемент родительскую с идентификатором = «Add-элемент», который покрывает каждый элемент, который содержит класс .toAdd.
• Затем я создал атрибут данных для каждого div, содержащего класс .toAdd.
• Теперь я показываю элемент один за другим. Но после первого элемента. Каждый другой элемент будет добавляться к родительскому div i.e., # классу Add-element.

Теперь код, который я переписал. jsfiddle ссылка: http://jsfiddle.net/YvE5F/10/