Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on click.
Below is an excerpt of the code snippet I am currently using:
.isaaccrm {
float: left;
height: 20px;
width: 100px;
}
.zoho {
height: 50px;
width: 115px;
padding-top: 10px;
float: right;
margin-right: 30px;
}
.salesforce {
height: 60px;
width: 90px;
padding-top: 10px;
padding-left: 20px;
}
.infusionsoft {
height: 25px;
width: 180px;
padding-top: 5px;
}
.sugarcrm {
height: 60px;
width: 90px;
padding-top: 10px;
margin-right: 55px;
float: right;
}
.comparisons {
margin-top: 30px;
margin-bottom: 30px;
/* Make the comparison font into Lato*/
}
.center {
text-align:center;
}<head>
</head>
<body>
<table>
<tr>
<th></th>
<th><img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/></th>
<th><img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/></th>
<th><img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/></th>
<th><img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/> </th>
<th><img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/></th>
</tr>
<tr>
<th> <p class="comparisons">Operating Systems</p>
<td class="center">Web</td>
<td class="center">Web</td>
<td class="center">Web</td>
<td class="center">Web</td>
<td class="center">Web</td>
</th>
</tr>
</table>
</body>Here's how it appears on my website:
The "Operating Systems" row is what I want to manipulate - I aim to hide the data inside while keeping the name visible on the left. Upon clicking, I intend for the information to be displayed (and this process repeats). By "hide," I mean that the rows should shrink as if collapsing, then expand and reveal the data upon click.
Is there a suitable function or method to achieve this effect?
Any assistance would be highly appreciated