Question

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");
    });

});

Answer 1

It sounds like you are looking for TabIndex. It’s hard to tell how it would work in context of your accordian without an example (hint: use a service like JS Fiddle), but in modern browsers you can add “tab into” functionality using HTML’s tabindex property.

<h2 class="radioBoxInActive" tabindex="0">Product Details</h2>

For more information check out this page:

• If given a value of “-1”, the element can’t be tabbed to but focus can be given to the element programmatically (using element.focus()).
• If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
• Values greater than 0 create a priority level with 1 being the most important.

Of course, if you want anything special to happen when the header is selected you will need to add functionality. Assuming your $ is jQuery, you can add this using $(sel).focus(fn).