Tais Accordion

by Chase Wilson

HTML

<script src="http://ioapwb01.tais.net/js/third-party/jQuery/ui.1.8/jquery.ui.core.js"></script>
<script src="http://ioapwb01.tais.net/js/third-party/jQuery/ui.1.8/jquery.ui.widget.js"></script>
<script src="http://ioapwb01.tais.net/js/third-party/jQuery/ui.1.8/jquery.ui.toggleboxes.js"></script>
<div id="dashboard-wrapper">
<div id="right-column">
<h3 class="title-bar">BackOrder</h3> 
<div id="order-parts"> 
    <div class="support-table-wrapper"> 
        <table class="support-table"> 
            <tbody class="support-table-body"> 
                
                <tr> 
                    <td colspan="2">There are no backordered items</td> 
                </tr> 
                
            </tbody> 
            
            <thead> 
                <tr> 
                    <th>Order #</th> 
                    <th>Description</th> 
                </tr> 
            </thead> 
            
        </table> 
    </div> 
</div> 

<!--<div id="other-info"> --> 
<h3 class="title-bar">Technicians</h3> 
<div id="technicians"> 
    <div class="support-table-wrapper"> 
        <table class="support-table"> 
            <tbody class="support-table-body"> 
                
                <tr> 
                    <td nowrap align="left">107315&nbsp;/&nbsp;JASON&nbsp;BORDEAUX</td> 
                    <td nowrap align="center">A</td> 
                    <td nowrap>CST</td> 
                    <td nowrap align="right">12/31/2012</td> 
                </tr> 
                
                <tr> 
                    <td nowrap align="left">107316&nbsp;/&nbsp;MIKE&nbsp;KIANI</td> 
                    <td nowrap align="center">A</td> 
                    <td nowrap>CST</td> 
                    <td nowrap align="right">12/31/2012</td> 
                </tr> 
                
                <tr> 
                    <td nowrap align="left">908499&nbsp;/&nbsp;FRED&nbsp;NASSIRKHANI</td> 
                    <td nowrap align="center">A</td> 
                    <td...

CSS

/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; text-decoration: none; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit...

JavaScript

$(function(){
    $("#right-column").toggleboxes({
        header:'.title-bar',
        autoHeight: false,
        collapsable: false,
        change: function(event, ui){
        }
    });
});