Table experiments

by Alon Rotem

HTML

<table id="expTable" border="0" cellspacing="0" cellpadding="2" width="100%">
    
 <tr>
     <td class="durationInfo" rowspan="4">
         info 1
         </td>
     <td class="position" colspan="1" style="width:85% !important;">Manager, Software Engineering, Sitefinity SDK Team</td>
        </tr>
            <tr class="clickForMore">
          <td class="additionalInfoTitleOpen"  style="width:85% !important;">&#x21e9; Click to read more about the project</td>
        </tr>
       <tr>
          <td class="additionalInfoContentOpen"  style="width:85% !important;">
            <span class="additionalInfo">
            <b>The Sitefinity CMS Software Development Kit (SDK)</b> includes:
            <br />Telerik&#39;s developer productivity tools, OpenAccess ORM, how-to tutorials, sample projects, Visual Studio
            templates, and comprehensive documentation.
            <br />The SDK is designed to increase the developers&#39; productivity when meeting project requirements and developing
            Sitefinity extensions for the Sitefinity Marketplace.
            <br /></span>
            <center>
              <span class="additionalInfo">
                <img src="Logos/Sitefinity_screenshort.png" style="max-width:100%;" />
              </span>
            </center>
          </td>
        </tr>
       <tr>
		
		
          <td class="moreabout" rowspan="2"  style="width:85% !important;">
            <ul>
              <li>Manager of a team of 5, including .NET developers up to a senior level and technical writers</li>
              <li>Developed extensions for our .NET CMS, 
              <a href="http://www.sitefinity.com" target="_blank">Sitefinity</a>.</li>
              <li>Worked both on frontend and backend code.</li>
              <li>Architectured and built the entire 
              <a href="http://docs.sitefinity.com" target="_blank">Sitefinity documentation portal</a>, including development of
              content, developer documentation,...

CSS

body {
    margin: 0;
    background-color: #D3D3D3; /*light gray*/
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 14px;
}

ul {
    margin: 4px;
    line-height: 23px;
}

li {
    list-style-type: square;
}

a {
    text-decoration: none;
    color: #37A8ED;
}

#maincontent {
    width: 60%;
    margin: 0 auto;
    background-color: white;
}

.showMoreCompanyInfo {
    display:none;
}

.showMoreCompanyInfo div {
    display:none;
    background-color: #E2E2E2;
}

.companyInfoSideOpener div {
    border-left: 1px solid black;
    
    height: 20px;
    vertical-align: middle;
    padding-top: 5px;
    background-color: #B4D6F7;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;      
    /*Gradiend background: http://www.cssportal.com/css-gradient-generator/ */
    /*
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B4D6F7 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B4D6F7 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B4D6F7 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #B4D6F7));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B4D6F7 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #B4D6F7 100%);
    */
}

.companyInfoSideOpenerOpen div {
    border-left: 1px solid black;
    height: 20px;
    vertical-align: middle;
    padding-top: 5px;
    border-bottom: 1px solid black;

    background-color: #92ABC6 !important;
    color: white !important;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;...

JavaScript

function toggleProjectAndCompanyInfo(clickedTR)
		{
				if($(clickedTR).next("tr").find(".additionalInfo").is(":visible"))
				{
					$(clickedTR).find("td:nth-child(1)").html("&#x21e9; Click to read more about the project");
					$(clickedTR).find("td:nth-child(2)").html("&#x21e9; Click to read more about the company");
					$(clickedTR).find("td:nth-child(1)").removeClass("additionalInfoTitleClosed");
					$(clickedTR).find("td:nth-child(1)").addClass("additionalInfoTitleOpen");
					$(clickedTR).find("td:nth-child(2)").removeClass("additionalInfoTitleClosed");
					$(clickedTR).find("td:nth-child(2)").addClass("additionalInfoTitleOpen");
					$(clickedTR).next("tr").find("td:nth-child(1)").removeClass("additionalInfoContentClosed");
					$(clickedTR).next("tr").find("td:nth-child(1)").addClass("additionalInfoContentOpen");
					$(clickedTR).next("tr").find("td:nth-child(2)").removeClass("additionalInfoContentClosed");
					$(clickedTR).next("tr").find("td:nth-child(2)").addClass("additionalInfoContentOpen");
				}
				else
				{
					$(clickedTR).find("td:nth-child(1)").html("&#x21e7; Click to close");
					$(clickedTR).find("td:nth-child(2)").html("&#x21e7; Click to close");
					$(clickedTR).find("td:nth-child(1)").removeClass("additionalInfoTitleOpen");
					$(clickedTR).find("td:nth-child(1)").addClass("additionalInfoTitleClosed");
					$(clickedTR).find("td:nth-child(2)").removeClass("additionalInfoTitleOpen");
					$(clickedTR).find("td:nth-child(2)").addClass("additionalInfoTitleClosed");			
					$(clickedTR).next("tr").find("td:nth-child(1)").addClass("additionalInfoContentClosed");
					$(clickedTR).next("tr").find("td:nth-child(1)").removeClass("additionalInfoContentOpen");
					$(clickedTR).next("tr").find("td:nth-child(2)").addClass("additionalInfoContentClosed");
					$(clickedTR).next("tr").find("td:nth-child(2)").removeClass("additionalInfoContentOpen");
				}
				$(clickedTR).next("tr").find(".additionalInfo").slideToggle();
		}

$(function()...