Creates click-to-show content functionality with optional text input requirements. Perfect for answers, solutions, hints, or any content that should be revealed on demand. Supports both simple reveal and active reveal with user input requirements.
Wrap content in a container with class .reveal or .active-reveal. The system automatically creates reveal buttons and handles the show/hide functionality.
.reveal - Simple click-to-show content.active-reveal - Requires user input before revealingdata-button="text" - Custom text for reveal button (default: "Reveal")data-min-text="number" - Minimum characters required for active-revealdata-placeholder="text" - Placeholder text for textareadata-rows="number" - Number of rows for textarea (default: 5)This content is hidden until the reveal button is clicked.
Perfect for answers, solutions, or additional information.
The answer is: 42
This is the answer to the ultimate question of life, the universe, and everything.
This content requires the user to type at least 10 characters before the reveal button becomes active.
Great for encouraging reflection before showing answers.
This hint will only be revealed after you write at least 20 characters.
The textarea has been customized to 3 rows instead of the default 5.
Here's a step-by-step breakdown:
Note: This approach works best for complex problems.
This is the first hint.
This is the second hint.
This is the final answer.
What is the capital of Canada?
@ Ottawa is the capital city of Canada.
.reveal for simple click-to-show functionality.active-reveal to require user input before revealingdata-button attributedata-min-text attributedata-placeholder attributedata-rows attribute