jQuery accordion - set input focus for active accordion?

**Nevermind. I figured it out. **

I did it like this:

$("#accordion").accordion({
        header:'h3',
        active: '#section1',
        autoheight: false,
        clearstyle: true,
}).bind("change.ui-accordion", function(event,ui) {
    $("#text1").focus();
});

I've got an accordion all set up, and each div has a form w开发者_开发百科ithin it. I'm just trying to figure out how to set the focus on an input field depending on which one is open...

/* accordion */
$("#accordion").accordion({
        header:'h3',
        active: '#section1',
        autoheight: false,
        clearstyle: true
});

Basically, I want to set the cursor in the first input field for whichever section is open. The actual forms are much bigger, so I condensed it enormously...

    <div id="accordion">
        <h3 id="section1"><a href="#">Section 1/a></h3>
        <div>
            <form id="form1" action="form.php" method="post">
                <fieldset class="inside">
                    <input type="text" name="text1" id="text1" size="50" value="Default text" />
                    <input class="open" type="button" value="Submit" name="submit1" />
                </fieldset>
            </form>
        </div><!--/div-->

        <h3 id="section2"><a href="#">Section 2</a></h3>
        <div>
            <form id="form2" action="form.php" method="post">
                <fieldset class="inside">
                    <input type="text" name="text2" id="text2" size="50" value="Submit" />
                    <input class="open" type="button" value="Submit" name="submit2" />
                </fieldset>
            </form>
        </div><!--/div-->

        <h3 id="section3"><a href="#">Section 3</a></h3>
        <div>
            <form id="form3" action="form.php" method="post">
                <fieldset class="inside">
                    <input type="text" name="text3" id="text3" size="50" value="Submit" />
                    <input class="open" type="button" value="Submit" name="submit3" />
                </fieldset>
            </form>
        </div><!--/div-->

$("#accordion").accordion({ header:'h3', active: '#section1', autoheight: false, clearstyle: true, }).bind("change.ui-accordion", function(event,ui) { $("#text1").focus(); });

That's not going to work for the other sub-accordions. As you're hard-coding the ID of the textbox to focus.

It's probably possible to hook into something on that change.ui-accordion event but I'm not terribly familiar with it. You could use something like this:

    $(document).ready(function() {
        $("div#accordion > h3 > a").click(function(e) { // when we click a link

            e.preventDefault(); // prevent the click from bubbling

            var parenth3 = $(this).parent(); // find the parent h3 the sender is in

            //this selector then finds the first textbox that is in the div adjacent to the parent h3.
            $("#" + parenth3[0].id + " + div > form > fieldset.inside > input[type=text]:first").focus();

        });
    });

This feels pretty hacky to me.

Edit: Also note that your anchor tag for Section 1 is not closed properly.

it's better to use the accordion built in events like so

    $(".accordion").accordion({
        beforeActivate: function()  {},
        activate: function( event, ui ) {
            $(ui.newPanel).find('input')[0].focus()
         }
    });

gingers are the best

The two methods mentioned above (.bind("change.ui-accordion"... and activate: function( event, ui ) {...) work if there is only one input that needs to be focused. I had 3 text inputs that the user needed to be able to click through. To fix this I used:

    $(":input").click(function() {
      $(this).focus();
    });

Of course ":input" can be changed to whatever you need.