Dawn's CDRL Hide/Show

by mrjordy

HTML

<div class="CDRL_Tables">
<div class="fittycentpiece">
<input type="checkbox" id="NGENShowHide"/>
<label for="NGENShowHide">NGEN CDRLs</label>
<div id="NGENblock">
<TABLE id="cdrltable">
    <tr>
        <td>A001</td>
        <td>Meeting Agendas</td>
    </tr>
    <tr>
        <td>A001-05 through A003-05</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-10 through A003-10</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-11 through A003-11</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-12 through A003-12</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-13 through A003-13</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-14 through A003-14</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-15 through A003-15</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-16 through A003-16</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-17 through A003-17</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-18 through A003-18</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-19 through A003-19</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-20 through A003-20</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-21 through A003-21</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-22 through A003-22</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A001-23 through A003-23</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A002</td>
        <td>Presentation Material</td>
    </tr>
    <tr>
        <td>A003</td>
        <td>Meeting Minutes</td>
    </tr>
    <tr>
        <td>A004</td>
        <td>Program Management Plan (PMP)</td>
    </tr>
    <tr>
        <td>A005</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>A006</td>
        <td>Integrated Master Schedule (IMS)</td>
    </tr>
    <tr>
        <td>A007</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
    ...

CSS

#NGENblock {
    display:none;
    padding:10px;
    text-align:center;
    position: absolute;
    width: 44%;
}
#CoSCblock {
    display:none;
    padding:10px;
    text-align:center;
    position: absolute;
    width: 44%;
}
.fittycentpiece {
    width: 49%;
    display: inline-block;    
}
#CoSCShowHide, #NGENShowHide, label {
    cursor: pointer;
}
#cdrltable > tbody > tr:nth-child(even) {
    background: #eef;
}
#cdrltable > tbody > tr > td {
    min-width:100px;
    text-align:left;
    font-size: 10px;
}
.CDRL_Tables {
    min-width: 430px;
}

JavaScript

$('#NGENShowHide').click(function(){
    this.checked?$('#NGENblock').show(100):$('#NGENblock').hide(100);
});
$('#CoSCShowHide').click(function(){
    this.checked?$('#CoSCblock').show(100):$('#CoSCblock').hide(100);
});