S2230507 - Baseline

by dixalex

HTML

<table class="dcm_table">
    <tbody class="top_row second_row">
        <tr class="row-elements">
            <td class="left empty first_column"></td>
            <td class="table_header" colspan="5">Update Our Productivity App and/or Telephony Service</td>
            <td class="empty last_column"></td>
        </tr>

        <tr class="row-elements">
            <td class="first_column show_hide">(+\-)</td>
            <td class="microsoft">INSERT PS Suite Chosen inCanned Task if not BP</td>
            <td class="microsoft">Office 365
                <br>Business Premium</td>
            <td class="microsoft">Office 365 Business Premium plus Advanced Telephony</td>
            <td>Grasshopper</td>
            <td>RingCentral</td>
            <td class="last_column last_header">Stick with what I have/Not use any of these solutions</td>
        </tr>
    </tbody>
    <tbody class="prod_features">
        <tr class="row-elements">
            <td class="first_column orange">
                <h4>Productivity Features</h4></td>
            <td></td>
            <td></td>

            <td></td>
            <td></td>
            <td></td>
            <td class="last_column spacer" rowspan="29"></td>
        </tr>
        <tr class="row-elements">
            <td class="first_column orange">
                <h5>Productivity apps</h5></td>
            <td></td>
            <td></td>

            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="row-elements">
            <td class="first_column">Fully installed productivity apps on your PC
                <br>(always up to date versions of Word, Excel, PowerPoint, etc.)</td>
            <td>-</td>
            <td>bulletMark</td>

            <td>bulletMark</td>
            <td></td>
            <td></td>
        </tr>
        <tr class="row-elements">
            <td class="first_column">Browser-based productivity apps</td>
            <td>bulletMark</td>
           ...

CSS

table.dcm_table {
    border-collapse: collapse;
    border-bottom: solid 2px #000;
    border-top: none;
    border-left: none;
    border-right: solid 1px #DDD;
    width: 1250px;
}

.c {
    display: none;
}

table.dcm_table td {
    border: solid 1px #000;
    font-family: arial;
    font-size: .75em;
    text-align: center;
    padding: 2px;
    min-width: 145.25px;
    max-width: 145.25px;
}

table.dcm_table .table_header {
    font-weight: bold;
    background-color: #e7ebf7;
}

table.dcm_table .first_column {
    text-align: left;
    padding: .3em;
    padding-left: .5em;
    min-width: 165px;
}

table.dcm_table .first_column.show_hide {
    text-align: center;
    cursor: pointer;
}

table.dcm_table .left.empty {
    border: none;
}

table.dcm_table .last_column.empty {
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    border-bottom: none;
}

table.dcm_table .last_column.last_header {
    border-top: none;
}

table.dcm_table .last_column.exclusive,
table.dcm_table .last_column.spacer,
.prod_features .row-elements:nth-child(odd) td.last_column.spacer,
.prod_features .row-elements:nth-child(even) td.last_column.spacer,
.tele_features .row-elements:nth-child(odd) td.last_column,
.calling_features .row-elements:first-child td.last_column.spacer {
    border-top: none;
    border-bottom: none;
    background: none;
    background-color: #f5f7f9;
}

table.dcm_table .last_column {
    background-color: #f5f7f9;
}

.top_row.second_row .row-elements:last-child td {
    font-weight: bold;
    padding: .3em;
}

table.dcm_table .prod_features .row-elements:nth-child(odd) td {
    background-color: #FFF;
    border-bottom: none;
    border-top: none;
}

table.dcm_table .prod_features .row-elements:first-child td,
table.dcm_table .prod_features .row-elements:nth-child(even) td {
    background-color: #fff2cc;
    border-bottom: none;
    border-top: none;
}

.tele_features .row-elements:nth-child(odd) td {
    background-color: #e6e9ee;
   ...

JavaScript

jQuery('.show_hide').on('click', function(e) {
    var hide_prod = jQuery('.prod_features tr:not(:first-child)');
    jQuery(hide_prod).toggleClass('c');
});