difficulty in making a collapsle div set

Question

I need to make a collapsable div so i was following the below structure , but somehow the div taht is formed is not being expanded .

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

I tried to achive the following using the below code ,

Here is the js code for achiveing the above

 if(somecondition)
                 {
                      var buildcart = $('<div id="addtoordersdiv" class="content"></div>');
                      buildcart.append($('<ul>'));
                      buildcart.append($('<li>'));
                      buildcart.append('<div data-role="collapsible"><h3>'+itemname+'</h3></div>');
                      buildcart.append($('</li>'));
                      buildcart.append($('</ul>'));
                      $("#ordersdiv").prepend(buildcart);
                      $("#ordersdiv").show();
                  }
                  else
                  {
                      $('#addtoordersdiv').remove();
                  }


 $(".header").click(function () {
        $header = $(this);
        $content = $header.next();
        $content.slideToggle(500, function () {
            $header.text(function () {
                return $content.is(":visible") ? "Collapse" : "Expand";
            });
        });
    });

Here is the html part of that

<div id="ordersdiv" class="container">
    <div class="header"><span>Expand</span>

    </div>

</div>

Here is the css part

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

could anybody please let me know whats the mistake ??

Answer 1

As you are using .prepend() method to put element then you should use this:

$content = $header.prev();  // $content = $header.next();

or change this:

$("#ordersdiv").append(buildcart); // $("#ordersdiv").prepend(buildcart);

demo