S2230507 - Addon

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 class='comp_one'>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><span class='bullet_mark'>&#8226;</span></td>
            <td><span class='bullet_mark'>&#8226;</span></td>
            <td></td>
            <td></td>
        </tr>
        <tr class='row-elements'>
            <td class='first_column'>Browser-based...

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');
});