How do I make this toggle / form-label accessible

enter image description here

I have a large form witch contains some text input elements such as the one above. (Please don't mind the language in the form).

When a user clicks / taps anywhere on the item (from the picture at left all the way to the arrow at right), the input field is visible (by a slide animation).

enter image description here

The user can then click / tap on the same area (above the input field) to hide that input field again.

Try it live here.

Questions:

  1. Is it that obvious that the label has this open / close function?

  2. According to WCAG, when a user clicks or taps the label "Kompetenser", the cursor shall be placed inside the input field. Now the function has been altered. How does this affect accessibility?

  3. Is there some other way this open/close function can be implemented and still be accessible? (No code, just the method)

Tags: