JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
	<div class="content-container">
	
		<div class="row wizard" id="wizard">
		  <div class="col-xs-3">
		    <div class="wizard-sidebar list-group">
		      <a>Import Step1</a>
		      <a>Import Step2</a>
		      <a>Import Step3</a>
		      <a>Import Step4</a>
		      <a>Import Step5</a>
		      <a>Import Step6</a>
		    </div>
		  </div>
		  <div class="col-xs-9">
	      	<div id="step1" class="well wizard-content">1</div>
	      	<div id="step2" class="well wizard-content">2</div>
	      	<div id="step3" class="well wizard-content">3</div>
	      	<div id="step4" class="well wizard-content">4</div>
	      	<div id="step5" class="well wizard-content">5</div>
	      	<div id="step6" class="well wizard-content">6</div>
		  </div>
		</div>
		
	</div>
</div>

CSS

.btn-step-area .btn{
    color:#333;
}

JavaScript

(function($){
	$.fn.wizard = function(data,opt) {
		var $that = $(this),
		options = {
			step_prev : 'Prev',
			step_next : 'Next'
		};
		if( jQuery.isPlainObject(data) )
		{
 			opt = data;
		}
		$.extend(options,data);
		$.each(options,function(k,v){
			if( jQuery.isFunction(v) )
			{
				$that.bind('wizard.'+k,v)
			}
		})
		function init(){
			$that.data({
				'now_step' : 0 ,
			});
			var links = $that.data('wizard-links');
			$that.find('.wizard-sidebar > a').each(function(i,n){
				if( typeof links != 'undefined' )
				{
					links = links.add(n);
				}else{
					links = $(n);
				}
				var title = n.innerHTML;
				$(n)
				  .attr('href','#')
				  .attr('data-step',(i+1) )
				  .data('title',title)
				  .addClass('list-group-item')
				  .html('<h4 class="list-group-item-heading">'+title+'</h4>');
			})
			$that.data('wizard-links',links);
			var wells = $that.find('.wizard-content');
			$that.data('wizard-wells',wells);
			wells.hide().each(function(i,n){
				var $well =	$(n);
				$well.attr('data-step',(i+1));
				if( ! $well.find('.header').lenght ){
					$well.prepend('<div class="header"><h2>'+ links.eq(i).data('title')+'</h2></div>');
				}
				if( ! $well.find('.btn-step-area').lenght ){
					$btnArea = $('<ul />', { class : 'btn-step-area pager' }).appendTo( $well );
				}
				if( i>0 && ! $well.find('.btn-prev').lenght ){
					$btnArea.append('<li class="previous"><a href="#" class="btn btn-info btn-prev">'+options.step_prev+'</a></li>')
				}
				if( ! $well.find('.btn-next').lenght ){
					$btnArea.append('<li class="next"><a href="#" class="btn btn-danger btn-next">'+options.step_next+'</a></li>')
				}
			})
			$that.on('click','.btn-next,.btn-prev',function(e){
				var caseMove = $(this).hasClass('btn-next') ? 'next' : 'prev';
				var $p = $(this).closest('div[data-step]');
				var step = parseInt( $p.data('step') ,10 ) 
					step = caseMove == 'next' ? step+1 : step-1;
					console.log(step)
				$that.moveToAction( step );
			   ...