17

I am trying to make a large form more friendly. There are a number of fields which are used in special cases and these are hidden inside an accordion container with links to expose them if desired.

However (at least in Chrome) if you tab through fields you'll end up with focus on fields that are hidden from view but accessible to keyboard input.

What would be a Good™ way to handle this? Use jQuery to set tabindex based on display != none and then re-set when accordion events occur? Maybe when a field hidden by CSS receives focus the enclosing accordion is opened?

Here is a jsfiddle demonstrating the issue using the html below. Tab goes from visible to accordion link to hidden text input and out to last visible: http://jsfiddle.net/2EfXM/

<p class="file_info">
    <label>Visible
        <input type="text" name="vis1" id="vis1" class="date" value="" />
    </label>
</p>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show more fields
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse out">
             <h5>Source/Use Metadata</h5>

            <p class="file_info">
                <label>Hidden:
                    <input type="text" name="default_original_source" id="default_original_source" class="" value="" />
                </label>
            </p>
        </div>
    </div>
</div>
<p class="file_info">
    <label>Visible
        <input type="text" name="vis2" id="vis2" class="date" value="" />
    </label>
</p>

An interesting side note: using display:none then broke jQuery validate in IE 9. It threw errors on the hidden fields:

SCRIPT5007: Unable to get value of the property 'call': object is null or undefined jquery.validate.js, line 1174 character 5

After some research this was the final solution:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility:visible;
}
jerrygarciuh
  • 21,158
  • 26
  • 82
  • 139

1 Answers1

21

Updated to keep accordion working and forms validating

Your main issue is that the code needs to set a visibility: hidden (note: originally I had display: none, but that created form validation issues per the OP's comment below) to the collapsed element. With visibility: hidden, the tabbing is ignored (because the element no longer has visibility in the document).

The code in your previous fiddle just sets the height: 0. This modified fiddle adds some CSS to control the visibility as well:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}

It is functioning as you desire.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • I spoke too quickly - this disables the accordion after it is closed after opening once but it is very close to what I need. – jerrygarciuh May 31 '13 at 16:36
  • I've updated the code and fiddle to keep the accordion working. I just moved the `display: none` to the `input` itself. – ScottS May 31 '13 at 16:44
  • Haha. Yep- as you did that I was also trying it. Works great! Update you CSS in answer? – jerrygarciuh May 31 '13 at 16:45
  • One more note on this- ended up using visibility instead of display. IE 9 reacted badly when jQuery validate tried to run and elements of form had display:none. – jerrygarciuh May 31 '13 at 19:29
  • 1
    Ok. I've updated the answer to the more stable version using visibility. – ScottS May 31 '13 at 19:36