Modified Accordion 5

With functions

by makloon

HTML

<div class="step" id="step1">
<a class="step-title"> Step 1
<span class="edit">Edit</span>
<span class="close"> Close</span>
</a>
<div class="step-content">
<p>
I am the step's content. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</p>
<a class="save" data-step="step2">Save & Next</a>
</div>
</div>

<div class="step" id="step2">
<a class="step-title"> Step 2
<span class="edit">Edit</span>
<span class="close"> Close</span>
</a>
<div class="step-content">
<p>
I am the step's content. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</p>
<a class="save" data-step="step3">Save & Next</a>
</div>
</div>

<div class="step" id="step3">
<a class="step-title" id="title3"> Step 3
<span class="edit" id="edit3">Edit</span>
<span class="close"> Close</span>
</a>
<div class="step-content">
<!-- //////// SUB-STEP /////// -->
<div class="sub-step" id="step3-1">
<a class="sub-step-title"> Step 3-1
<span class="edit">Edit</span>
<span class="close"> Close</span>
</a>
<div class="sub-step-content">
<p>
I am the step's content. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</p>
<a class="sub-save" data-step="step3-2">Save & Next</a>
</div>
</div>
<!-- //////// SUB-STEP /////// -->
<div class="sub-step" id="step3-2">
<a class="sub-step-title"> Step 3-2
<span class="edit">Edit</span>
<span class="close"> Close</span>
</a>
<div class="sub-step-content">
<p>
I am the step's content. <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</p>
<a class="sub-save" data-step="step3-3">Save & Next</a>
</div>
</div>
<!-- //////// SUB-STEP /////// -->
<div class="sub-step" id="step3-3">
<a class="sub-step-title"> Step 3-3
<span class="edit">Edit</span>
<span class="close"> Close</span>
</a>
<div...

CSS

body {
  font-family: arial;
  background-color: #eee;
}
.step-title > span, .sub-step-title > span {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
  border-radius: 2px;
  float: right;
}
.edit {
  background-color: green;
  display: none;
}
.close {
  background-color: gray;
  display: none;
}
.step {
  background-color: #fff;
  margin-bottom: 4px;
}
.sub-step {
  background-color: #eee !important;
  margin-bottom: 10px;
}
.step-title {
  background-color: #ddd;
  padding: 15px;
  display: block;
  cursor: pointer;
}
.sub-step-title {
  background-color: #e3e3e3 !important;
  display: block;
  padding: 15px;
}
a.step-title.active, a.step-title.lastx {
  background-color: #ccc;
  font-weight: bold;
}

a.sub-step-title.active {
  background-color: #c3c3c3 !important;
  font-weight: bold;
}

.step-content {
  padding: 10px 10px 5px 10px;
}
.step-content p {
  margin: 0;
}
.sub-step-content {
  padding: 10px 10px 5px 10px;
}
.save, .sub-save, .sub-save-last {
  background-color: green;
  padding: 10px 8px;
  color: #fff;
  display: inline-block;
  margin: 10px 0;
}

JavaScript

$(document).ready(function(){
// Initialize steps
$("div.step:not(:eq(0))").hide();
$('div.step').eq(0).children('.step-title').addClass('active last');
//$("div.sub-step:not(:eq(0))").hide();
//$('div.sub-step').eq(0).children('.sub-step-title').addClass('active sub-last');

// click on step title
$(".step-title").click(function(){
	if ($(this).hasClass("last") && $(this).hasClass("active"))
  {
  
  }
  else if ($(this).hasClass("last"))
  {
  
  }
	else if ($(this).hasClass("active"))
  {	
  	$(this).children(".edit").show();
    $(this).children(".close").hide();
  	$(this).next(".step-content").slideUp(200);
  	$(this).removeClass("active");
    $('.step').find('.last').siblings('.step-content').slideDown(200);
    $('.step').find('.last').addClass('active');
    
  } else {
  	$(".step-title").children(".edit").show();
    $(".step-title").children(".close").hide();
    $(".step-title.active.last").children(".close, .edit").hide();
		$(this).children(".edit").hide();
    $(this).children(".close").show();
  	$(".step-title").removeClass("active");
    $(this).addClass("active");
    $(".step-content").slideUp(200);
    $(this).next(".step-content").slideDown(200);
  }
});
// click on sub step title
$(".sub-step-title").click(function(){
	if ($(this).hasClass("sub-last") && $(this).hasClass("active"))
  {
  }
  else if ($(this).hasClass("sub-last"))
  {
  }
	else if ($(this).hasClass("active"))
  {
  	$(this).children(".edit").show();
    $(this).children(".close").hide();
  	$(this).next(".sub-step-content").slideUp(200);
  	$(this).removeClass("active");
    $('.step').find('.sub-last').siblings('.sub-step-content').slideDown(200);
    $('.step').find('.sub-last').addClass('active');
    
  } else {
  	$(".sub-step-title").children(".edit").show();
    $(".sub-step-title").children(".close").hide();
    $(".sub-step-title.active.sub-last").children(".close, .edit").hide();
  	$(this).children(".edit").hide();
    $(this).children(".close").show();
 ...