JSFiddle - React, Tailwind, and code Playground

1391 Accordion Test

by Jennifer Perrin

HTML

<div class="wrapper">
    <div id="accordion">
        <div class="level">
        <a href="#" class="opening">View FY 2014</a>
          <div class="expanded">
          <table class="fileList">
          <thead><tr><th class="colPN">Project No</th>
          <th class="colVer cellCenter">Ver</th>
          <th class="colDesc">Description</th>
          <th class="colLoc">Location</th>
          <th class="colDT cellCenter">Upload Date</th>
          <th>User</th></tr></thead>
              
              <tr><td><a href="http://google.com">17142</a></td>
          <td class="cellCenter">1</td>
          <td>ELECTRIC POWER, GAS-FIRED</td>
          <td>Joint Base San Antonio</td>
          <td class="cellCenter">24-Sep-2012</td>
          <td>Perrin, J</td></tr><tr><td><a href="">17142</a></td>
          <td class="cellCenter">2</td>
          <td>ELECTRIC POWER, GAS-FIRED</td>
          <td>Joint Base San Antonio</td>
          <td class="cellCenter">24-Sep-2012</td>
          <td>Perrin, J</td></tr><tr><td><a href="">17142</a></td>
          <td class="cellCenter">3</td>
          <td>ELECTRIC POWER, GAS-FIRED</td>
          <td>Joint Base San Antonio</td>
          <td class="cellCenter">25-Sep-2012</td>
          <td>Perrin, J</td></tr><tr><td><a href="">17142</a></td>
          <td class="cellCenter">4</td>
          <td>ELECTRIC POWER, GAS-FIRED</td>
          <td>Joint Base San Antonio</td>
          <td class="cellCenter">25-Sep-2012</td>
          <td>Perrin, J</td></tr><tr><td><a href="">41449</a></td>
          <td class="cellCenter">1</td>
          <td>Repair Training Ctr</td>
          <td>Fort Lee</td>
          <td class="cellCenter">24-Sep-2012</td>
          <td>Perrin, J</td></tr></table></div>
            
        <a href="#" class="opening">View FY 2013</a>
          <div class="expanded">
          <table class="fileList">
          <thead><tr><th class="colPN">Project No</th>
          <th class="colVer cellCenter">Ver</th>
          <th...

CSS

/************************* Accordion Styles *********************/
#accordion {  }
.wrapper {
    width:100%;
    margin:0 auto;
}
a.opening {
    margin-top: 3px;
    display:block;
    padding:3px 30px;
    text-decoration:none;
    color:#fff;
    border-bottom:1px solid #1a4f85;
    background:#1a4f85 url(http://jenniferperrin.com/blog/wp-content/uploads/2012/10/tooltipConnectorDown.png) no-repeat 5px;
}
a.opening:hover {
    color:#fff;
    text-decoration: none !important;
    background:#6699cc url(http://jenniferperrin.com/blog/wp-content/uploads/2012/10/tooltipConnectorDown.png) no-repeat 5px;
}
a.active, a.active:hover {
    color:#fff;
    text-decoration: none !important;
    background:#6699cc url(http://jenniferperrin.com/blog/wp-content/uploads/2012/10/tooltipConnectorUp.png) no-repeat 5px;
}
.expanded {
    padding:0 15px;
}
#accordion a:link {
    color: #fff;
    text-decoration: none;
}
#accordion a:hover { text-decoration: underline; }


/************************* File List Styles *********************/
.fileList { width:100%; margin: 6px 0; }
.fileList a:link {
    padding: 0 1px;
    color: #1a4f85 !important;
    text-decoration: none;
    font-weight: bold;
}
.fileList a:hover {
    border-bottom: 1px dotted #222;
    color: #000;
    text-decoration: none !important;
}
/* Zebra Stripe */
.fileList tbody tr:nth-child(even) {
    background: #f2f5f9;
}
/* Highlight Row on Mouse Over simular to Dojo Grids */
.fileList tbody tr:hover {
    background: #60a1ea;
    color: #fff !important;
    cursor:pointer;
}
.fileList tbody tr:hover a {
    color: #fff !important;
}
.fileList th {
    background: url("../../common/js/dojo/1.5.0/dijit/themes/soria/images/titleBar.png") repeat-x scroll center top #f4fff4;
    font-size: 11px;
    font-weight: bold;
}
.fileList td, .fileList th {
    padding: 2px 10px;
    font-size: 11px;
    border-bottom: 1px dotted #ACCBE9;
}
.fileList th {
    text-align: left;
    border-bottom: 1px dotted #919191;
}
/*...

JavaScript

$(document).ready(function() {
    // Accordian
    $("#accordion .expanded").hide();

    $("a.opening").click(function(){
        $(this).next().slideToggle('slow', function(){
            $(this).prev("a.opening").toggleClass("active");
        });
        return false;
    });

    $("td").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
   
});