Horizontal Accordion - Table instead of Un-ordered Lists

[Phill Pafford]

I have posted the question on this forum but no response: The Question

Here is and example of what I'm trying to do: The Example

Here is the code breakdown

JavaScript:

<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function(){
            firstColumn = $(".firstColumn");
            maxWidth = 50;
            minWidth = 50;

                        $("tr th").click(function(){    
                $(firstColumn).animate({
                    width: minWidth + "px"
                }, {
                    queue: false,
                    duration: 900
                });
                $(this).animate({
                    width: maxWidth + "%"
                }, {
                    queue: false,
                    duration: 900
                });
                firstColumn = this;
            });
        });
</script>

CSS:

<style type="text/css">
    .tbl {
        table-layout: fixed;
        border-top: 5px solid #333;
        border-collapse: collapse;
        background: #fff;
    } .tbl td {
        border-bottom: 1px dashed #333;
        padding: 2px 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    } .tbl th {
        border-bottom: 1px dashed #333;
        padding: 2px 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

HTML (Table Layout):

<table class="tbl" width="100%">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th>
            Cell 2:Long Heading Data
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
        <th>
            Cell 6:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            Cell 2:Row 1:Overflowing Data
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1
        </td>
        <td>
            Cell 6:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
    </tr>
</table>

Would like to set the width of the table and on mouse-over expand each column to view all the data and on mouse-out display like 10% of the column. Also need a show all or expand all columns, maybe a full view option check-box.

Now I have looked into the colgroup but it doesn't look to be supported for all major browsers.

Thanks again for any efforts in helping me with this, Here is kind of a live DEMO but it's not working correctly in FF and needs to hide the overflow as well for the <th> tags

[Larry Battle]

It's best not to add this feature.
But if you want it, then try this.
http://jsbin.com/irezo
Tables are no fun to work with. Use divs.

[Phill Pafford]

Thanks Larry, but I don't think this will work for a solution due to if I have more columns than the page displays the overflow hides them.

I have modified the code and it's getting closer to what I would like.

As for the <div> tag, I might be able to use a wrapper as you have done but the data is in table format

New DEMO link for the code below

[Phill Pafford]

UPDATED:

JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        firstColumn = $(".firstColumn");
        maxWidth = 50;
        
        // Get width % ratio for min width
        var c_count = $('tr:first-child').children().size();
        var w_ratio = (100 / c_count);
        
        minWidth = w_ratio;
        
        $("tr th").click(function(){
            $(firstColumn).animate({
                width: minWidth + "%"
            }, {
                queue: false,
                duration: 900
            });
            
            $(this).animate({
                width: maxWidth + "%"
            }, {
                queue: false,
                duration: 900
            });
            firstColumn = this;
            
            // Reset the cell width
            $('tr:first-child').children().css({
                'width': w_ratio,
                'overflow': 'hidden',
                'white-space': 'nowrap',
                'text-overflow': 'ellipsis'
            });
        });
    });
</script>

CSS:

<style type="text/css">
    .tbl {
        table-layout: fixed;
        border-top: 5px solid #333;
        border-collapse: collapse;
        background: #fff;
    } .tbl td {
        border: 1px solid #688;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
    } .tbl th {
        border-bottom: 1px solid #333;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        background: blue;
    }
</style>

HTML:

<table class="tbl" width="100%">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th>
            Cell 2:Long Heading Data
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
        <th>
            Cell 6:Heading
        </th>
        <th>
            Cell 7:Heading
        </th>
        <th>
            Cell 8:Heading
        </th>
        <th>
            Cell 9:Heading
        </th>
        <th>
            Cell 10:Heading
        </th>
        <th>
            Cell 11:Heading
        </th>
        <th>
            Cell 12:Heading
        </th>
        <th>
            Cell 13:Heading
        </th>
        <th>
            Cell 14:Heading
        </th>
        <th>
            Cell 15:Heading
        </th>
        <th>
            Cell 16:Heading
        </th>
        <th>
            Cell 17:Heading
        </th>
        <th>
            Cell 18:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            Cell 2:Row 1:Overflowing Data
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1
        </td>
        <td>
            Cell 6:Row 1
        </td>
        <td>
            Cell 7:Row 1
        </td>
        <td>
            Cell 8:Row 1
        </td>
        <td>
            Cell 9:Row 1
        </td>
        <td>
            Cell 10:Row 1
        </td>
        <td>
            Cell 11:Row 1
        </td>
        <td>
            Cell 12:Row 1
        </td>
        <td>
            Cell 13:Row 1
        </td>
        <td>
            Cell 14:Row 1
        </td>
        <td>
            Cell 15:Row 1
        </td>
        <td>
            Cell 16:Row 1
        </td>
        <td>
            Cell 17:Row 1
        </td>
        <td>
            Cell 18:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
        <td>
            Cell 7:Row 2
        </td>
        <td>
            Cell 8:Row 2
        </td>
        <td>
            Cell 9:Row 2
        </td>
        <td>
            Cell 10:Row 2
        </td>
        <td>
            Cell 11:Row 2
        </td>
        <td>
            Cell 12:Row 2
        </td>
        <td>
            Cell 13:Row 2
        </td>
        <td>
            Cell 14:Row 2
        </td>
        <td>
            Cell 15:Row 2
        </td>
        <td>
            Cell 16:Row 2
        </td>
        <td>
            Cell 17:Row 2
        </td>
        <td>
            Cell 18:Row 2
        </td>
    </tr>
</table>