how to expand a collapsible fieldset when user hit tab button from keyboard?

how to expand a collapsible fieldset when user hit tab button from keyboard?

Hi,

By using this tutorial Stylish Collapsible Fieldset using CSS3 and JQuery, I have created asp.net web form with collapsible fieldsets. When this web page/form loads all the fieldsets at that time they are collapsed/closed but when user clicks on any legend the fieldset becomes expand/open.

Now I want to add another feature that when user finishes entering data in the controls of first fieldset and he/she wants to move to the very next fieldset. Then he/she (currently in the last control (that may be a textbox or a dropdown list) of the previous fieldset) can open/expand ***only*** the very next fieldset by just hitting/pressing tab from the keyboard.

Here is my Jquery code-

  1.   $(document).ready(function() {
            $("legend").click(function() {
                $(this).toggleClass("collapsed");
                $(this).nextAll("ul").slideToggle(500);
            });
            $("fieldset legend").addClass("collapsed");
            $("fieldset legend").nextAll("ul").hide();
    });







Can anybody let me know how can I modify the above code to achieve my desired feature?

I have tried to modify my code like below-

  1.    $(document).ready(function() {
            $("legend").click(function() {
                $(this).toggleClass("collapsed");
                $(this).nextAll("ul").slideToggle(500);
            });
            $("fieldset legend").addClass("collapsed");
            $("fieldset legend").nextAll("ul").hide();

            $("input").keypress(function(event) {
            if (event.keyCode == 9) {

                        $("fieldset legend").nextAll("ul").show();
                    }
            $("select").keypress(function(event) {
            if (event.keyCode == 9) {

                        $("fieldset legend").nextAll("ul").show();
                    }
            });



















   

But this doesn't work in the right way. As due to nextAll("ul").show() function it expands all the fieldsets at once, which is not required. I need to expand the ul one by one like only the first ul expand than when I finish entering data in the controls of a ul than by pressing tab key only the very next ul will expand.

Here is the HTML structure of my page-

  1.  <div class="content">
     <div class="container">
       <div class="wrapper">
           <fieldset>
               <legend>First Feildset's Legend</legend>
               <p></p>
               <ul>
                    <li>Textbox Control</li>
                   <li>Textbox Control</li>
                   <li>Dropdown Control</li>
                   <li>Textbox Control</li>
               </ul>
            </feildset>
            <fieldset>
               <legend>Second Feildset's Legend</legend>
               <p></p>
               <ul>
                    <li>Textbox Control</li>
                   <li>Textbox Control</li>
                   <li>Dropdown Control</li>
                   <li>Textbox Control</li>
               </ul>
            </feildset>
       </div> 
    </div>
    </div>

























Please let me know your feedback!!!

Regards,
Dazy