JSFiddle - React, Tailwind, and code Playground

Change class name on click in jQuery

by alachgar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
  <div class="stepwizard">
    <div class="stepwizard-row setup-panel">
      <div class="stepwizard-step">
        <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
        <p>Step 1</p>
      </div>
      <div class="stepwizard-step">
        <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
        <p>Step 2</p>
      </div>
      <div class="stepwizard-step">
        <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
        <p>Step 3</p>
      </div>
      <div class="stepwizard-step">
        <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
        <p>Step 4</p>
      </div>
      <div class="stepwizard-step">
        <a href="#step-5" type="button" class="btn btn-default btn-circle" disabled="disabled">5</a>
        <p>Step 5</p>
      </div>
    </div>
  </div>
  <form role="form" id="myform" action='/save'>
    <div class="row setup-content" id="step-1">
      <div class="col-xs-12">
        <div class="col-md-12">
          <h3> Step 1</h3>
          <div class="form-group">
            <label class="control-label">First Name</label>
            <input maxlength="100" type="text" id="field" name="field" class="form-control" placeholder="Enter First Name" />
          </div>
          <div class="form-group">
            <label class="control-label">Last Name</label>
            <input maxlength="100" type="text" class="form-control" placeholder="Enter Last Name" />
          </div>
          <button...

CSS

body {
	 margin-top:30px;
	}
	.stepwizard-step p {
	 margin-top: 0px;
	 color:#FF8000;
		font-size: 20px;
	}
	.stepwizard-row {
	 display: table-row;
	}
	.stepwizard {
	 display: table;
	 width: 100%;
	 position: relative;
	}
	.stepwizard-step button[disabled] {
	 /*opacity: 1 !important;
	 filter: alpha(opacity=100) !important;*/
	}
	.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
	 opacity:1 !important;
	 color:#bbb;
	}
	.stepwizard-row:before {
	 top: 25px;
	 bottom: 0;
	 position: absolute;
	 content:" ";
	 width: 100%;
	 height: 1px;
	 background-color: red;
	 z-index: 0;
	}
	.stepwizard-step {
	 display: table-cell;
	 text-align: center;
	 position: relative;
		
	}
	.btn-circle {
	 width: 50px;
	 height: 50px;
	 text-align: center;
	 padding: 5px 0;
	 font-size: 25px;
	 line-height: 1.428571429;
	 border-radius: 30px;
	}
	input[type="radio"] {
	 -ms-transform: scale(1.6); /* IE 9 */
	 -webkit-transform: scale(1.6); /* Chrome, Safari, Opera */
	 transform: scale(1.6);
	}
	input[type="checkbox" ] {
	 -ms-transform: scale(1.6); /* IE 9 */
	 -webkit-transform: scale(1.6); /* Chrome, Safari, Opera */
	 transform: scale(1.6);
	}
	.custom-control-label {
	font-size: 17px;
	}
	.control-label {
	font-size: 17px;
	}
	.button-box {
  text-align:center;
  margin-top:20px;
 }

JavaScript

//Validation & Steps
			$(document).ready(function () 
			{

				var navListItems = $('div.setup-panel div a');
				allWells = $('.setup-content');
				allNextBtn = $('.nextBtn');
				allPrevBtn = $('.prevBtn');
				allWells.hide();

				navListItems.click(function (e) {
				e.preventDefault();
				var $target = $($(this).attr('href'));
					$item = $(this);

				if (!$item.hasClass('disabled')) 
				{
					navListItems.removeClass('btn-success').addClass('btn-default');
					$item.addClass('btn-success');
					allWells.hide();
					$target.show();
					$target.find('input:eq(0)').focus();
				}
			});

				allNextBtn.click(function () 
				{
					var curStep = $(this).closest(".setup-content");
					curStepBtn = curStep.attr("id");
					nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a");
					curInputs = curStep.find("input[type='url'],input[type='checkbox'],input[type='text'],input[type='email'],input[type='radio']"); //
					isValid = true;

					$(".form-group").removeClass("has-error");
					for (var i = 0; i < curInputs.length; i++) 
						{
								if (!curInputs[i].validity.valid) 
								{
									isValid = false;
									$(curInputs[i]).closest(".form-group").addClass("has-error");
								}
						}

					if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
			
				});
				// Back button click action
				allPrevBtn.click(function()
					{
						var curStep = $(this).closest(".setup-content"),
							curStepBtn = curStep.attr("id"),
							prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
							prevStepWizard.removeAttr('disabled').trigger('click');
					});

				
			$('div.setup-panel div a.btn-success').trigger('click');
	});