www.webdeveloper.com
Results 1 to 4 of 4

Thread: Horizontal Accordion - Table instead of Un-ordered Lists

Hybrid View

  1. #1
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046

    Horizontal Accordion - Table instead of Un-ordered Lists

    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:

    Code:
    <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:

    Code:
    <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):

    HTML Code:
    <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

  2. #2
    Join Date
    Jul 2009
    Posts
    45
    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.
    Help me out by telling others about my jquery plugin.
    http://code.google.com/p/jquizme/

    Learn Javascript, not java, here. Take a 3 days.
    http://www.w3schools.com/JS/default.asp

  3. #3
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    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
    Last edited by Phill Pafford; 07-17-2009 at 07:26 AM.

  4. #4
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    UPDATED:

    JavaScript:

    Code:
    <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:

    Code:
    <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:

    HTML Code:
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles