EXPANDING COLLAPSING DIV

/*
if there a situation that need to have arrange div as blocks/bricks structure then follow this
*/

STEP1:
<link href="../Script/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="../Script/jquery.min.js" type="text/javascript"></script>
STEP2:

<script type="text/javascript">
        $(document).ready(function () {
            $("#expanderHead").click(function () {
                $("#expanderContent").slideToggle();
                if ($("#expanderSign").text() == "+") {
                    $("#expanderSign").html("−")
                }
                else {
                    $("#expanderSign").text("+")
                }
            });
        });
</script>
STEP3:

  <div id="expanderHead" style="cursor: pointer; background-color: Gray; width: 250px;padding-left:10px" class="ui-corner-all">
            EXPANDING COLLAPSING DIV <span id="expanderSign" style="color: Black;font-size:larger"><b>+</b></span>
        </div>
        <div id="expanderContent" style="display: none;padding-left:30px">
            content<br />
            content<br />
            content<br />
            content<br />
            content<br />
        </div>