HTML Table Expand Demo

This is to demonstrate how to create an html table that expands with messages

by Amen Ra

HTML

<table id="myMessages">
                        <thead>
                            <tr>
                                <th class="blankHeader">
                                </th>
                                <th class="messageIdHeader">
                                    Message ID
                                </th>
                                <th class="submitDate">
                                    <span class="thText">Date
                                        <br />
                                        Submitted</span> <span class="arrow"></span>
                                </th>
                                <th class="lastUpdate">
                                    <span class="thText">Last Update</span> <span class="arrow"></span>
                                </th>
                                <th class="thSort serviceTypeHD">
                                    <span class="thText">Service Type</span> <span class="arrow"></span>
                                </th>
                                <th class="origHead">
                                    <span class="thText">Origination
                                        <br />
                                        Type</span> <span class="arrow"></span>
                                </th>
                                <th class="contractIDHD">
                                    Contract ID
                                </th>
                                <th>
                                    Member Name
                                </th>
                                <th class="thSort">
                                    <span class="thText">Servicing<br />
                                        Plan Code</span> <span class="arrow"></span>
                                </th>
                                <th class="blankHeader">
                                </th>
                            </tr>
                        </thead>
       ...

CSS

body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}

        #myMessages { border-collapse:collapse;}

        #myMessages h4 { margin:0px; padding:0px;}

        #myMessages img { float:right;}

        #myMessages ul { margin:10px 0 10px 40px; padding:0px;}

        #myMessages th { background:#7CB8E2 url("http://imaginationeverywhere.info/jexpand/header_bkg.png") repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}

        #myMessages td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }

        #myMessages tr.odd td { background:#fff url("http://imaginationeverywhere.info/jexpand/row_bkg.png") repeat-x scroll center left; cursor:pointer; }

        #myMessages div.arrow { background:transparent url("http://imaginationeverywhere.info/jexpand/arrows.png") no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}

        #myMessages div.up { background-position:0px 0px;}

JavaScript

$(document).ready(function() {
    $('#myMessages thead tr').show();
    $("#myMessages tr:odd").addClass("odd");

    $("#myMessages tr:not(.odd)").hide();

    $("#myMessagestr:first-child").show();



    $("#myMessages tr.odd").click(function() {

        $(this).next("tr").toggle();

        $(this).find(".arrow").toggleClass("up");

    });
});