Expandable & Collapsible Table

[SecureAPlus]

Hi there,

I’m looking to insert a table in my site and would like to achieve something like this - https://codepen.io/andornagy/pen/gaGBZz

I tried copying the codes in but it doesn’t work and would like to seek some help from here.

Thanks!

[thai]

Hi @SecureAPlus,

Please follow these steps:

• Add the following code to the text element:

<table>
	<thead>
		<tr>
			<th>Regian</th>
			<th>Q1 2010</th>
			<th>Q2 2010</th>
			<th>Q3 2010</th>
			<th>Q4 2010</th>
		</tr>
	</thead>
	<tbody>
		<tbody class="labels">
			<tr>
				<td colspan="5">
					<label for="accounting">Accounting</label>
					<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
				</td>
			</tr>
		</tbody>
		<tbody class="hide">
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>
		<tbody class="labels">
			<tr>
				<td colspan="5">
					<label for="management">Management</label>
					<input type="checkbox" name="management" id="management" data-toggle="toggle">
				</td>
			</tr>
		</tbody>
		<tbody class="hide">
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Europe</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Middle East</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>		
	</tbody>
</table>

• Add this CSS to the custom CSS section on the left hand side:

table { 
	width: 750px; 
	border-collapse: collapse; 
	margin:50px auto;
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

.labels tr td {
	background-color: #2cc16a;
	font-weight: bold;
	color: #fff;
}

.label tr td label {
	display: block;
}


[data-toggle="toggle"] {
	display: none;
}

• Add this JS to the custom JS:

jQuery(document).ready(function($) {
  $('[data-toggle="toggle"]').change(function(){
    $(this).parents().next('.hide').toggle();
  });
});

Please note: WordPress will not understand the $, we have to use jQuery instead.

Hope it helps

[rad]

Hi @SecureAPlus,

I recommend contacting the code author for that issue, the code is only applicable as is and isn’t going to be responsive on mobile. Or can be affected by other responsive features related to tables.

Please note that we can’t provide support or maintain a custom code and especially from another author.

Thanks!