CODEWITHSUNDEEP
javascriptjquerycsshtml
gs11111
gs11111

Reputation: 659

Add div below another div

I have a requirement to add 5 divs one by one on each click of a div button. ( the new div should be added below the existing div) I done the code, but the news ones are getting attached on the top of existing div. please help to correct this. I have another button which removes the added divs one by one(new ones to be remove first) here is my code.

  <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>

script:

$("#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";
    }

style:

#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 *

**Solution: Thankyou Shivam Chopra for helping me . Thanks a TON!! :)

for others, HEre is the solution** 

jsfiddle.net/coolshivster/YvE5F/12

Upvotes: 0

Views: 2011

Answers (1)

Shivam Chopra
Shivam Chopra

Reputation: 639

Remove margin top from both the div.

   #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;

}

Then, it will work accordingly. Here, the code : http://jsfiddle.net/coolshivster/YvE5F/

I have rewritten your code according to your requirement. Some explanation about the code

  • I have create a parent div element with id="Add-element" that covers every element which contains class .toAdd .
  • Then I created data attribute for every div containing class .toAdd .
  • Now, I display the element one by one. But after first element. Every other element will prepend on the parent div i.e., #Add-element class.

Now, the code which I have rewritten. jsfiddle link : http://jsfiddle.net/YvE5F/10/

Upvotes: 1

Related Questions