Tab throug input fields when display:none

Question

Imagine that:

<div>
    <input tabindex="1">
</div>
<div style="display:none">
    <input tabindex="2">
</div>
<div>
     <input tabindex="3">
</div>

Now I'm trying to tab through all these input fields, but he is not stepping into tabindex 2. Logical that this not working, but how i could implement that when he is on tabindex 1 and is supposed to go to tabindex 2 that the div becomes visible ?.

Thanks

Answer 1

As mentioned in the comment, make your div have opacity: 0. When you focus on that input that is hidden, you make it opacity: 1. Something like:

<div>
    <input tabindex="1"/>
</div>
<div style="opacity: 0">
    <input tabindex="2"/>
</div>
<div>
    <input tabindex="3"/>
</div>        

JS:

$('div:eq(1) input').on('focus', function() {
    $(this).parent().css('opacity','1');
}).on('blur', function() {
    $(this).parent().css('opacity','0');
});

Fiddle

Or you could do something with height (height: 0 / height: auto):

Fiddle

But from a user experience point of view it would be strange to have an extra input popup where you don't expect it.