Удобно использовать индекс вкладок, когда некоторые поля скрыты CSS (в контейнере аккордеона)

Я пытаюсь сделать большую форму более дружелюбной. Существует ряд полей, которые используются в особых случаях, и они скрыты внутри контейнера аккордеона со ссылками для их экспонирования, если это необходимо.

Однако (по крайней мере, в Chrome), если вы вставляете поля, вы в конечном итоге сосредоточитесь на полях, которые скрыты от просмотра, но доступны для ввода с клавиатуры.

Каким будет метод Good ™ для этого? Использовать jQuery для установки tabindex на основе отображения!= None, а затем повторно установить, когда происходят аккордеонные события? Может быть, когда поле, скрытое CSS, получает фокус, открывается открытый аккордеон?

Вот jsfiddle, демонстрирующий проблему, используя html ниже. Вкладка переходит от видимой к аккордеонной ссылке со скрытым вводом текста и до последней видимой: 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>

Интересная заметка: используя display:none, затем сломал jQuery validate в IE 9. Он выбросил ошибки в скрытые поля:

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

После некоторых исследований это было окончательное решение:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility:visible;
}