I have an accordion setup on my page with input form fields in the contents. When I cycle through the input fields and reach the end of the accordion section i Want the tab to select the header of hte next accordion section. but it just goes to the end to the submit button. how do I fix it? Let me share some code:
HTML
<input type="radio" class="radioBoxHide " name="byemail" id="byemail" value="byemail" data-panel="pageDetails" />
<h2 class="radioBoxInActive radioBoxActive">Page Details</h2>
<div class="tab-content" id="pageDetails">
<form name="pageDetails" action="" method="">
<div class="moduleRow" >
<label class="reqd" for="prCategory">Primary Category</label>
<select id="prCategory">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
</div>
</form>
</div>
<input type="radio" class="radioBoxHide " name="byemail" id="byemail" value="byemail" data-panel="productDetails" />
<h2 class="radioBoxInActive">Product Details</h2>
<div class="tab-content" id="productDetails">
<form name="productDetails" action="" method="">
<div class="moduleRow" >
<label for="displayName">Display Name</label>
<input type="text" name="displayName" id="displayName" value="" />
</div>
<div class="moduleRow" >
<label for="shortTitle">Short Title</label>
<input type="text" name="shortTitle" id="shortTitle" value="" />
</div>
</form>
</div>
and the javascript:
$(function () {
var app = this;
$("#siteLabel, #pageLabel, #articlelabel, #productlabel").hide();
$(".tabs-control label").click(function () {
input = $(this).prev("span, input");
$(".selected", app.element).removeClass("selected").hide();
$(".radioBoxActive", app.element).removeClass("radioBoxActive");
$("#" + input.attr("data-panel")).show().addClass("selected");
$(this).addClass("radioBoxActive");
});
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
$(".selecteddd", app.element).removeClass("selecteddd").hide();
str += $(this).attr("data-panel") + " ";
$("#" + $(this).attr("data-panel")).show().addClass("selecteddd");
});
}).change();
if ($(".tabs-control").hasClass('newProduct')) {
$("#pageDetails, #productDetails, #imageFields, #addInfo, #nutriInfo").hide();
}
var selected = $(".radioBoxActive");
input = selected.prev("input");
$("#" + input.attr("data-panel")).show().addClass("selected");
$("h2.radioBoxInActive").click(function () {
input = $(this).prev("span, input");
$(".selected", app.element).removeClass("selected").slideUp();
$(".radioBoxActive", app.element).removeClass("radioBoxActive");
$("#" + input.attr("data-panel")).slideDown().addClass("selected");
$(this).addClass("radioBoxActive");
});
});