Heidi – makes forms more interactive

Demo

This is a demo site for the JavaScript library Heidi. It shows or hides content areas according to user interaction on form elements. You only need to use data-attributes in HTML. Heide was created by Herbert Braun (wortwart).

Heidi Demo: Form Elements

Click the checkboxes

This checkbox opens an input field nearby. This one opens an HTML box somewhere else. This one opens all elements of a class. This one closes some elements of a class. This one shows nesting.

Select an option:

Choose again:
Yes
No

Pick a number:

Enter some text: (Click somewhere on the page when you're finished)

Thank you!

Play with other form elements

Select an option:

This is my favourite option!

Choose with radio buttons:
Yes
No

Did I just hear a "Yes"?

Pick a number:

I love numbers.

Enter some text: (Click somewhere on the page when you're finished)

Hi, my name is Laura Ipsum!

This paragraph (p) shows up together with a few others of his class.

This paragraph (pre) shows up together with a few others of his class.

This paragraph (blockquote) shows up together with a few others of his class.

This paragraph disappears when a checkbox is clicked.

Heidi Demo: Buttons

Panel 1 was clicked

Panel 2 was clicked

Panel 3 was clicked