{{> top title="Move via ID"}}

	<div class="controls">
		<button type="button" class="second-id">Move to second item via ID</button><br />
		<button type="button" class="third-id">Move to third item via ID</button><br />
		<button type="button" class="first-id">Move to first item via ID</button><br />
		<button type="button" class="third-id-01">Move to third item via ID</button><br />
	</div>

	<div class="Tab">
		<ul class="Tab-items">
			<li class="Tab-item"><a href="#tab1" class="Tab-toggler" data-tab-id="tab1">Tab 1</a></li>
			<li class="Tab-item"><a href="#tab2" class="Tab-toggler" data-tab-id="tab2">Tab 2</a></li>
			<li class="Tab-item"><a href="#tab3" class="Tab-toggler" data-tab-id="tab3">Tab 3</a></li>
		</ul>
		<div class="Tab-panes">
			<div class="Tab-pane Tab-pane--1">
				<p>Pane 1</p>
			</div>
			<div class="Tab-pane Tab-pane--2" data-tab-id="tab2">
				<p>Pane 2</p>
			</div>
			<div class="Tab-pane Tab-pane--3" id="tab3">
				<p>Pane 3</p>
			</div>
		</div>
	</div>

	<script>

		$('.second-id').on('click', function () {
			$('.Tab').tabify('move', 'tab2');
		});

		$('.third-id').on('click', function () {
			$('.Tab').tabify('move', 'tab3');
		});

		$('.first-id').on('click', function () {
			$('.Tab').tabify('move', 'tab1');
		});

		$('.third-id-01').on('click', function () {
			$('.Tab').tabify('move', '#tab3');
		});

		$('.Tab').tabify();

	</script>

{{> bottom}}