{{> top title="Events"}}

	<div class="Tab">
		<ul class="Tab-items">
			<li class="Tab-item"><a href="#tab1" class="Tab-toggler">Tab 1</a></li>
			<li class="Tab-item"><a href="#tab2" class="Tab-toggler">Tab 2</a></li>
			<li class="Tab-item"><a href="#tab3" class="Tab-toggler">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">
				<p>Pane 2</p>
			</div>
			<div class="Tab-pane Tab-pane--3">
				<p>Pane 3</p>
			</div>
		</div>
	</div>

	<script>

		$('.Tab').tabify({
			select: function ( tab, pane ) {
				console.info('Select');
				console.info(this);
				console.info(arguments);
			},
			deselect: function ( tab, pane ) {
				console.info('Deselect');
				console.info(this);
				console.info(arguments);
			},
			create: function ( tab, pane ) {
				console.log('Created!');
				console.log(this);
				console.log(arguments);
			}
		});

		$('.Tab')
			.on('tabifyselect', function ( e, tab, pane ) {
				console.warn(arguments);
			})
			.on('tabifydeselect', function ( e, tab, pane ) {
				console.warn(arguments);
			})
			.on('tabifycreate', function ( e, tab, pane ) {
				console.warn(arguments);
			});

	</script>

{{> bottom}}