Por que alterar a visibilidade / exibição no foco não funciona?

Tive a ideia de criar um "botão" de pesquisa ao clicar em qual caixa de entrada apareceria e se estenderia. No entanto, em vez de usar uma caixa de seleção invisível, decidi tentar usar o rótulo, pois clicar no rótulo colocaria o foco no elemento ao qual o rótulo está conectado. E, embora focar e realizar transformações básicas funcionem, não consigo ocultar / mostrar a caixa de texto usandovisibility: hidden/visible oudisplay: none/inline-block. E não quero confiar apenas na opacidade, pois a caixa de texto pode ser encontrada / clicada mesmo enquanto está oculta.

Tentativa atual:JsFiddle

Por que isso não funciona? O que estou fazendo errado?

questionAnswers(4)

yourAnswerToTheQuestion