JSFiddle - React, Tailwind, and code Playground

by Kiwoong Jang

JavaScript

var $board = $("#dashboard"),
				$tab = $("#tabs"),
				$tabs = $("a", $tab),
				$panels = $(".panel");

		var current = 0,
				max = $panels.length - 1,
				speed = 500,
				delay = 2000,
				timer;

		$panels
				.hide()
				.eq(current).fadeIn(speed);
		$tabs
				.eq(current).addClass("on");

		$tab.delegate("a", "click", function(event) {
			clearTimeout(timer);
			chgPanel($(this).index());

			event.preventDefault();
		});

		timer = setTimeout(chgPanel, delay);

		function chgPanel(idx) {
			var next = (typeof idx === 'undefined') ? (current + 1) : idx;
			next = (next > max) ? 0 : next;

			$panels
					.eq(current).stop().fadeOut(speed).end()
					.eq(next).stop().fadeIn(speed);
			$tabs
					.eq(current).removeClass("on").end()
					.eq(next).addClass("on");

			current = next;
			timer = setTimeout(arguments.callee, delay);
		}