JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="new_checkout">
		  			<li>
						<div class="title" id="step-1">
							Step-1
						</div>
						<div class="content" id="step1">
						
						</div>
					</li>
					<li>
						<div class="title" id="step-2">
							Step-2
						</div>
						<div class="content" id="step2">
						
						</div>
					</li>
					<li>
						<div class="title" id="step-3">
							Step-3
						</div>
						<div class="content" id="step3">
						
						</div>
					</li>
					<li>
						<div class="title" id="step-4">
							Step-4
						</div>
						<div class="content" id="step4">
						
						</div>
					</li>
		  </ul>

CSS

ul.new_checkout {
  margin-bottom: 0px;
    list-style:none;
    margin:0px;
    padding:0px;
}
ul.new_checkout li > .title {
  font-size: 21px;
  color: #222;
  cursor: pointer;
  padding: 0 25px;
  line-height: 42px;
  background-color: #ccc;
  background-image: linear-gradient(#fcfcfc, #f0f1ee);
  background-image: -webkit-linear-gradient(#fcfcfc, #f0f1ee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcfcfc', EndColorStr='#f0f1ee');
  border: 1px solid #ccc;
  border-bottom: 0px;
}
ul.new_checkout li > .content {
  padding: 25px;
  background: #fff;
  border: 1px solid #ccc;
  display: none;
}
ul.new_checkout li:last-child > .title {
  border-bottom: 1px solid #ccc;
}

JavaScript

$(function(){
			$('ul.new_checkout li > .title').on('click', function(){
				var id=$(this).attr('id');
				var rep=id.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
				console.log("id:" +rep);
				if(rep){
                    $(".content").slideUp('fast');
					$("#"+rep).slideDown('fast');
					}
			})
		})