<table class="table-1 table-toggle">
	<colgroup>
		<col class="col-xl-1">
		<col class="col-xl-7">
		<col class="col-xl-2">
		<col class="col-xl-2">
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Regions</th>
			<th>1 to 3 months</th>
			<th>up to 06/2015</th>
		</tr>
	</thead>
	<tbody>
		<tr class="table-toggle__row odd">
			<td data-target="row-1" data-open="icons-arrow-down" data-close="icons-arrow-up"><a href="javascript:;" class="icons-arrow-down"></a></td>
			<td data-target="row-1">Table Cell 1</td>
			<td><a class="icons-circle green icon-bg-3"></a></td>
			<td class="table-tooltip-wrapper">
				<a class="icons-arrow-up-traffic green icon-bg-3" href="javascript:;" title="This is a example of tooltip" data-tooltip></a>
			</td>
		</tr>
		<tr class="table-toggle__row-child">
			<td data-target-id="row-1" colspan="12">
				<div class="{{colContent}} dark-bg">
					<h3>Information technologie</h3>
				</div>
				<div class="col-xl-12">
					{{ render "atoms/global/space:hr" space=10 }}
					<img src="{{imgProvider}}/160/85" alt="">
					{{ render "atoms/global/space:hr" space=10 }}
				</div>
				<div class="{{colContent}} dark-bg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa atque quisquam distinctio asperiores sunt, delectus repellendus iure quibusdam deleniti.</p>
				</div>
			</td>
		</tr>

		<tr class="table-toggle__row even">
			<td data-target="row-2" data-open="icons-arrow-down" data-close="icons-arrow-up"><a href="javascript:;" class="icons-arrow-down"></a></td>
			<td data-target="row-2">Table Cell 2</td>
			<td><a class="icons-circle red icon-bg-1"></a></td>
			<td class="table-tooltip-wrapper">
				<a class="icons-arrow-down-traffic red icon-bg-1" href="javascript:;" title="This is a example of tooltip" data-tooltip></a>
			</td>
		</tr>
		<tr class="table-toggle__row-child">
			<td data-target-id="row-2" colspan="12">
				<div class="{{colContent}} dark-bg">
					<h3>Information technologie</h3>
				</div>
				<div class="col-xl-12">
					{{ render "atoms/global/space:hr" space=10 }}
					<img src="{{imgProvider}}/160/85" alt="">
					{{ render "atoms/global/space:hr" space=10 }}
				</div>
				<div class="{{colContent}} dark-bg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa atque quisquam distinctio asperiores sunt, delectus repellendus iure quibusdam deleniti.</p>
				</div>
			</td>
		</tr>

		<tr class="table-toggle__row odd">
			<td data-target="row-3" data-open="icons-arrow-down" data-close="icons-arrow-up"><a href="javascript:;" class="icons-arrow-down"></a></td>
			<td data-target="row-3">Table Cell 3</td>
			<td><a class="icons-circle amber icon-bg-2"></a></td>
			<td class="table-tooltip-wrapper">
				<a class="icons-arrow-right-traffic amber icon-bg-2" href="javascript:;" title="This is a example of tooltip" data-tooltip></a>
			</td>
		</tr>
		<tr class="table-toggle__row-child">
			<td data-target-id="row-3" colspan="12">
				<div class="{{colContent}} dark-bg">
					<h3>Information technologie</h3>
				</div>
				<div class="col-xl-12">
					{{ render "atoms/global/space:hr" space=10 }}
					<img src="{{imgProvider}}/160/85" alt="">
					{{ render "atoms/global/space:hr" space=10 }}
				</div>
				<div class="{{colContent}} dark-bg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa atque quisquam distinctio asperiores sunt, delectus repellendus iure quibusdam deleniti.</p>
				</div>
			</td>
		</tr>

		<tr class="table-toggle__row even">
			<td data-target="row-4" data-open="icons-arrow-down" data-close="icons-arrow-up"><a href="javascript:;" class="icons-arrow-down"></a></td>
			<td data-target="row-4">Table Cell 4</td>
			<td><a class="icons-circle green icon-bg-3"></a></td>
			<td class="table-tooltip-wrapper">
				<a class="icons-arrow-up-traffic green icon-bg-3" href="javascript:;" title="This is a example of tooltip" data-tooltip></a>
			</td>
		</tr>
		<tr class="table-toggle__row-child">
			<td data-target-id="row-4" colspan="12">
				<div class="{{colContent}} dark-bg">
					<h3>Information technologie</h3>
				</div>
				<div class="col-xl-12">
					{{ render "atoms/global/space:hr" space=10 }}
					<img src="{{imgProvider}}/160/85" alt="">
					{{ render "atoms/global/space:hr" space=10 }}
				</div>
				<div class="{{colContent}} dark-bg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa atque quisquam distinctio asperiores sunt, delectus repellendus iure quibusdam deleniti.</p>
				</div>
			</td>
		</tr>

		<tr class="thead">
			<td></td>
			<td>Sektoren</td>
			<td></td>
			<td></td>
		</tr>

		<tr class="odd">
			<td></td>
			<td>Table Cell 6</td>
			<td><a class="icons-circle red icon-bg-1"></a></td>
			<td class="table-tooltip-wrapper">
				<a class="icons-arrow-down-traffic red icon-bg-1" href="javascript:;"></a>
			</td>
		</tr>
	</tbody>
</table>

{{^ nojs }}
<script>
	window.onload = function() {
		/**
		 * START - REQUIRED JAVASCRIPT SNIPPET
		 */
		{{ render "atoms/scripts/script-target-toggler" }}
		/**
		 * END - REQUIRED JAVASCRIPT SNIPPET
		 */
	};
</script>
{{/ nojs }}
