Expanding / Collapsing div's

by Draven

HTML

<div class="blogcontainer">
              <table border="0" class="blogtable">
                <tr class="topicpost">
                  <td>
                    <div class="postcontent">Test</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <a class="postreply">Post Reply</a>
                  </td>
                </tr>
              </table>
              <div class="postreplycontainer">
                <div class="latestreplies">Latest Replies</div>
                <table border="0" class="blogrepliestable">
                  <tr class="topicpost">
                    <td>
                      <div class="postcontent">Reply Test</div>
                    </td>
                  </tr>
                </table>
                <form name="ReplyForm" id="ReplyForm" action="" method="post">
                  <ul>
                    <li><textarea name="replycontents" id="replycontents" cols="25" rows="10"></textarea></li>
                    <li><input name="ReplyForm" type="submit" value="Post"></li>
                  </ul>
                </form>
              </div>
            </div>
            <div class="blogcontainer">
              <table border="0" class="blogtable">
                <tr class="topicpost">
                  <td>
                    <div class="postcontent">Blog 2</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <a class="postreply">Post Reply</a>
                  </td>
                </tr>
              </table>
              <div class="postreplycontainer">
                <form name="ReplyForm" id="ReplyForm" action="" method="post">
                  <ul>
                    <li><textarea name="replycontents" id="replycontents" cols="25" rows="10"></textarea></li>
                    <li><input name="ReplyForm" type="submit" value="Post"></li>
                  </ul>
                </form>
            ...

CSS

ul{list-style-type:none;}
.postreplycontainer form {width:85%;margin:0 auto;padding-top:4px}
textarea {width:100%;vertical-align:middle;padding:2px;border:1px solid #cdc2ab}
#blogstats {width:100%;height: 22px;text-align:center}
.blogcontainer {width:100%;padding:0 0 20px 0}
table.blogtable {border-collapse:collapse;width:100%}
table.blogtable tr {background-color:#ccc}
table.blogtable td, table.blogrepliestable td {background-color:#ccc;color:#000}
table.blogtable .topicpost, table.blogrepliestable .topicpost {overflow:auto}
table.blogtable .postcontent, table.blogrepliestable .postcontent {padding: 16px}
table.blogtable a {color:#000;cursor:pointer}
table.blogtable .votecontainer {vertical-align:bottom;text-align:right}
table.blogtable .votecontainer .voteup {display:inline-block;background:url("../images/icon-thumb-up.png") no-repeat top left;width:16px;height:16px}
table.blogtable .votecontainer .votedown {display:inline-block;background:url("../images/icon-thumb-down.png") no-repeat top left;width:16px;height:16px}
.postreplycontainer {display:none}
.latestreplies {width:60%;background-color:#ccc;color:blue;font-size:10px;margin:2px 0 1px auto}
table.blogrepliestable {border-collapse:collapse;width:60%;margin-left:auto;margin-right:0}

JavaScript

$(function(){
    $("a.postreply").click(function () {
        $(this).closest('.blogcontainer').find('.postreplycontainer').slideToggle("fast");
        $('#replycontents').focus();
    });
});