Want to try fastn for your company's website?
Book a Demo

Event Handing

How to create on-click event handling?

- Create a [mutable](/variables/#mutable) `boolean variable` inside the component.
Boolean variable
boolean $<boolean-variable>: true
Lang:
ftd
- Give `if condition` to the Body part.
if-condition
if: { box.<boolean-variable> }
Lang:
ftd
- Inside the Header row, we create the event for `on-click`.
on-click event
$on-click$: $toggle($<function-argument> = $box.<boolean-variable>)
Lang:
ftd
- Define the `toggle function` after component.
on-click event
-- void toggle(<function-argument>):
boolean $function-argument:

<function-argument> = !<function-argument>;
Lang:
ftd
Here We Go!!! We have made the Expander Project from scratch.
Don't want to rewrite this but want to reuse it in your next project? Or, You want to share it with others? In Part 5, you will learn how to publish it as a package on GitHub.
Continue with the [part 5 now](/expander/publish/).