S2230507 Cannded

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="2">Google Suite Image</td>
            <td class="table_header" colspan="2">Office 365 Image</td>
            <td class="empty last_column"></td>
        </tr>
        <tr class="row-elements">
            <td class="first_column show_hide">(+\-)</td>
            <td class="microsoft">Google Docs/Gsuite
                <br/>Basic</td>
            <td class="microsoft">Google Docs/GSuite
                <br/>For Business</td>
            <td class="microsoft comp_one">Office 365
                <br/>Business Essentials</td>
            <td class="microsoft">Office 365
                <br/>Business Premium</td>
            <td class="last_column last_header">Stay with Current/
                <br/>None of these</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 class="last_column exclusive spacer" rowspan="29">Office 365
                <br/>Business Premium</td>
        </tr>
        <tr class="row-elements">
            <td class="first_column orange">
                <h5>Productivity apps</h5></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><span class="bullet_mark">-</span></td>
            <td><span class="bullet_mark">-</span></td>
            <td><span class="bullet_mark">-</span></td>
            <td><span class="bullet_mark">•</span></td>
    ...

CSS

.styledRadio {
	      float: left;
	      clear: both;
	      margin: 0 3px 3px 0;
	      background-repeat: no-repeat;
	  }
	  
	  .styledCheckbox {
	      float: left;
	      clear: both;
	      margin: 0 3px 3px 0;
	      background-repeat: no-repeat;
	  }
	  
	  label {
	      line-height: 27px;
	      display: inline-block;
	      margin-bottom: 3px;
	  }
	  
	  .mrQuestionText {
	      font-weight: normal;
	  }
	  
	  #rrSurveyContainer {
	      width: 1300px;
	  }
	  
	  table.dcm_table .comp_one, table.dcm_table .comp_one.microsoft {
	      border-left: solid 2px #000;
	  }
	  
	  .bullet_mark {
	      font-weight: bold;
	      font-size: 1.35em;
	  }
	  
	  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: .73em;
	      text-align: center;
	      padding: 2px;
	      min-width: 145.25px;
	      max-width: 145.25px;
	  }
	  
	  table.dcm_table .table_header {
	      font-weight: bold;
	      background-color: #FFF;
	      border-top: solid 2px #000;
	      border-right: solid 2px #000;
	      border-left: solid 2px #000;
	  }
	  
	  table.dcm_table .first_column {
	      text-align: left;
	      padding: .3em;
	      padding-left: .5em;
	      min-width: 165px;
	      border-left: solid 2px #000;
	      border-right: solid 2px #000;
	  }
	  
	  table.dcm_table .first_column.show_hide {
	      text-align: center;
	      cursor: pointer;
	      border-top: none;
	      border-right: solid 2px #000;
	      border-left: none;
	  }
	  
	  table.dcm_table .left.empty {
	      border: none;
	  }
	  
	  table.dcm_table .last_column.empty {
	      border-top: solid 2px #000;
	      border-right: solid 2px #000;
	      border-bottom: none;
	  }
	  
	  table.dcm_table...

JavaScript

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

var comp_one_index = 0;

jQuery('.top_row tr:last td').each(function(index, element) {
    if (jQuery(element).hasClass('comp_one')) {
        comp_one_index = index;
        return false;
    }
});

jQuery('.dcm_table tr:gt(0)').each(function(row_index, row_element) {
    jQuery(row_element).children().filter(function(index, element) {
        return index === comp_one_index;
    }).addClass('comp_one');
});