Get focus(or scroll into view) to a panel using jquery

Question

I am setting up a form in which user will be able to see their selection of radio button(of a particular value) on a button click.

i am able to get the radio button focus and make the page to scroll to it, but want the parent panel-body to get focused on page just like scrollintoview() but that's not working.

also used .parents(".panel-body") before .focus() not working either.. ``

<div class="panel-body">
    <div class="input-opt">
        <p>Select options..</p>
        <div rel="tool-tip">
            <div class="radio">
                <label class="lead">
                    <input id="rad1" tabindex="1" required="required" value="one" type="radio">
                    one
                </label>
            </div>
            <div class="radio">
                <label class="lead">
                    <input id="rad2" tabindex="1" required="required" value="two" type="radio">
                    two
                </label>
            </div>

            <div class="radio">
                <label class="lead">
                    <input id="rad3" tabindex="1" required="required" value="three" type="radio">
                    three
                </label>
            </div>
        </div>
    </div>
</div>

button.addEventListener("click", function () {
    var ncyc = $("input[value='two']:checked").length;
    $("input[value*='two']:checked:eq(" + target + ")").focus().keyup();

    target = target + 1;
    if (target == ncyc) {
        target = 0;
    }
});

Code above enables only the radio button get into focus...when not using .parents(".panel-body")......i want the whole div to be in the visible frame

Answer 1

If parent is <div> it needs tabindex attribute. Try like this

$("input[value*='three']:checked:eq(" + target + ")")
.parent(".panel-body").attr("tabindex",-1).focus();

or add tabindex attribute to html tag like

<div class="panel-body" tabindex="-1">
</div>

and use in your code like old expression:

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").focus();

UPDATED: *If you don't want to change html you can do same thing through jquery code like the following

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").attr('tabindex','-1').focus();