Validate Individual Sections of Accordion

Article

Introduction

In my previous article I explained How to Create an Accordion that is having a feature to Open/Close Sections With/Without clicking on them.

As I said in my previous article, you can make your accordion in such a way that each section will only be closed when it is in a valid form (has valid data).

I will say the same thing in other words, not allowing the user to open/close sections of the Accordion until it's in a valid form.

So, let's see the procedure to create such an accordion.

Step 1

If you can remember from my previous article, we created some divs that were the sections of the accordion. So in today's case we need to validate those sections, in other words the divs that are not possible until you use any kind of external plugin (or it might be possible but unknown to me :) ), so to remove this problem I make some small changes in my both jQuery and HTML code and everything began working. I changed those divs with a <form> tag. Now the question is, why did I do that? The answer is, you can validate your forms very easily rather than validating anything else. So, change all those divs with <form> like this:

<div class="slider">
<form id="1divSection" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Click Here to Open First Tab </h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div1">
Provide Your First Name :- <input type="text" required/>
<br />
<br />
Provide Your Last Name :- <input type="text" required/>
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="2divSection" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Second Tab </h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div2">
Provide Your Mobile Number:- <input type="number" />
<br />
<br />
Provide Your Email ID :- <input type="email" />
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="Div3" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Third Tab </h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div4">
Provide Your Mailing Address :- <input type="text" required/>
<br />
<br />
Provide Your Permanent Address :- <input type="text" />
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="Div5" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Fourth Tab </h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div6">
Provide Your Mother Name :- <input type="text" required/>
<br />
<br />
Provide Your Father Name :- <input type="text" required/>
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="Div7" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Fifth Tab </h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div8">
Provide Your Current CTC :- <input type="text" />
<br />
<br />
Provide Your Expected CTC :- <input type="text" />
</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>

Step 2

Now we need to check whether our current form is valid or not. This could only be done on the click of each button present in each form and we are already having a button so why not use it? So, I just make a small change in the click event of these buttons as in the following:

$('.btn-primary').click(function () {
if ($(this).parent().parent().valid()) {
$(this).parent().slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");
$(this).parent().siblings().toggleClass("current");
$(this).parent().siblings().siblings("h3").addClass("current");
$(this).parent().siblings().parent().next().children('h3').next(".container").slideToggle("fast").parent()
.siblings().children(".container:visible").slideUp("fast");
$(this).parent().siblings().parent().next().children('h3').toggleClass("current");
$(this).parent().siblings().parent().next().children('h3').siblings("h3").removeClass("current");
return false;
}
});

So, from now on you next Section will expand only when this current section is valid.

But still we have a problem, if the user clicks on the head of a section. In that case the accordion will work normally and your form will not be checked, whether it's valid or not, so the simple solution is "Comment the code of click event of <h3> tag :D".

//$('.slider h3').click(function () {
// $(this).next(".container").slideToggle("fast").parent().siblings().children(".container:visible")
.slideUp("fast");
// $(this).toggleClass("current");
// $(this).siblings("h3").removeClass("current");
// return false;
//});

Step 3

Now one more problem develops. What would happen if the user wants to update a section? Because he does not have an option to open the section again (we removed the code of the click event for the <h3> tag) so one solution is to provide an edit button on all those sections that are valid and filled in. This can be done by adding a button inside <h3> tag and making it display:none.

<form id="1divSection" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Click Here to Open First Tab
<input type="button" class="clsEdit" style="display:none" value="Edit" />
</h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div1">
Provide Your First Name :- <input type="text" required/>
<br />
<br />
Provide Your Last Name :- <input type="text" required/>
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>

Now we need to enable it on the submission of each form, so again we need to make changes on a button click.

$('.btn-primary').click(function () {
if ($(this).parent().parent().valid()) {
$(this).parent().siblings().children().attr('style', 'display:block inline');
$(this).parent().slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");
$(this).parent().siblings().toggleClass("current");
$(this).parent().siblings().siblings("h3").addClass("current");
$(this).parent().siblings().parent().next().children('h3').next(".container").slideToggle("fast").parent().siblings()
.children(".container:visible").slideUp("fast");
$(this).parent().siblings().parent().next().children('h3').toggleClass("current");
$(this).parent().siblings().parent().next().children('h3').siblings("h3").removeClass("current");
return false;
}
});

Now only that button will become visible whose parent form is valid and all the others will still be in hidden form.

Step 4

Now we need to work on the click event of this new button because we need to open the section on it's click.

$('.clsEdit').click(function () {
$(this).parent().next(".container").slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");
$(this).parent().toggleClass("current");
$(this).parent().siblings("h3").removeClass("current");
});

But now you open the scope for your testing team because they might say "If we are clicking on this edit button again then it's making the section close, if it's for edit then how it can close the Section? :D ". So, play safe and add one more line to the click event of this button as in the following:

$('.clsEdit').click(function () {
$(this).parent().next(".container").slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");
$(this).parent().toggleClass("current");
$(this).parent().siblings("h3").removeClass("current");
$(this).attr('style', 'display:none');
});

This will be make your Edit button hidden again so now that question will not develop.

Now our application is created and it's complete code looks something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.6.4.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<script src="jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$(".slider div div").show();
setTimeout("$('.slider').children('form').children('div').slideToggle('fast');", 1000);
$('.SectionClass:visible').first().children('div').slideToggle('fast');
//$('.slider h3').click(function () {
// $(this).next(".container").slideToggle("fast").parent().siblings().children(".container:visible")
.slideUp("fast");
// $(this).toggleClass("current");
// $(this).siblings("h3").removeClass("current");
// return false;
//});
$('.btn-primary').click(function () {
if ($(this).parent().parent().valid()) {
$(this).parent().siblings().children().attr('style', 'display:block inline');
$(this).parent().slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");
$(this).parent().siblings().toggleClass("current");
$(this).parent().siblings().siblings("h3").addClass("current");
$(this).parent().siblings().parent().next().children('h3').next(".container").slideToggle("fast").parent()
.siblings().children(".container:visible").slideUp("fast");
$(this).parent().siblings().parent().next().children('h3').toggleClass("current");
$(this).parent().siblings().parent().next().children('h3').siblings("h3").removeClass("current");
return false;
}
});
$('.clsEdit').click(function () {
$(this).parent().next(".container").slideToggle("fast").parent().siblings().children(".container:visible")
.slideUp("fast");
$(this).parent().toggleClass("current");
$(this).parent().siblings("h3").removeClass("current");
$(this).attr('style', 'display:none');
});
});
</script>
</head>
<body>
<div class="slider">
<form id="1divSection" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Click Here to Open First Tab
<input type="button" class="clsEdit" style="display:none" value="Edit" />
</h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div1">
Provide Your First Name :- <input type="text" required/>
<br />
<br />
Provide Your Last Name :- <input type="text" required/>
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="2divSection" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Second Tab
<input type="button" class="clsEdit" style="display:none" value="Edit" />
</h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div2">
Provide Your Mobile Number:- <input type="number" />
<br />
<br />
Provide Your Email ID :- <input type="email" />
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="Div3" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Third Tab
<input type="button" class="clsEdit" style="display:none" value="Edit" />
</h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div4">
Provide Your Mailing Address :- <input type="text" required/>
<br />
<br />
Provide Your Permanent Address :- <input type="text" />
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="Div5" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Fourth Tab
<input type="button" class="clsEdit" style="display:none" value="Edit" />
</h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div6">
Provide Your Mother Name :- <input type="text" required/>
<br />
<br />
Provide Your Father Name :- <input type="text" required/>
</div>
</div>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-lg active">Next</button>
<div class="clearfix"></div>
</div>
</form>
<form id="Div7" class="SectionClass hide" style="border:1px thin black">
<h3 class="bg-danger">Cick Here to Open Fifth Tab
<input type="button" class="clsEdit" style="display:none" value="Edit" />
</h3>
<div class="container">
<div class="col-lg-12 col-md-12">
<div class="form-group hide" id="Div8">
Provide Your Current CTC :- <input type="text" />
<br />
<br />
Provide Your Expected CTC :- <input type="text" />
</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</body>
</html>

Output

On running the application you will see a normal Accordion just as in my previous article.

jQueryAccordion

If you click on the button without providing the valid values then you will get an error message like this:

jQueryAccordion

Provide valid values and again click on the button to see the real changes. You will see that this section is closed and the next section becomes visible and this closed section has an edit button.

jQueryAccordion