Twig change variable to false on click to hid

Question

I have a Twig variable that I am using to show an intro section and then the actual form.

Variable

{% set intro = true %}

When true, the intro section shows up, for example below.

{% if intro == true %}
     <div class="Intro Wrapper Row">
        <div class="form-container">
        <div>
            <div>
                <button onclick="{{ intro|false }}">Lets Begin</button>
            </div>
    </div>

{% endif %}
{% if intro == false %}

    <div class="SurveyFormLogin Wrapper Row">
        <div class="form-container">
        </div>
    </div>

in Twig, how can I set the intro to false so that the Intro hides and Survey shows? or is this the best way to approach this in Twig?

Answer 1

Your Twig template is loaded and rendered server-side, that is, the resulting HTML is generated on server-side and then the HTML is sent to the browser via HTTP response (probably) which is then displayed there. So, you intend to make your Twig more dynamic, which means that you need to pass a value to it. Example:

$app["twig"]->addGlobal("intro", $isIntro);

where $isIntro is assumed to be a properly initialized boolean.

EDIT

An example of specifying nonglobal Twig parameter values:

return $this->render('user/notifications.html.twig', [
    // this array defines the variables passed to the template,
    // where the key is the variable name and the value is the variable value
    // (Twig recommends using snake_case variable names: 'foo_bar' instead of 'fooBar')
    'user_first_name' => $userFirstName,
    'notifications' => $userNotifications,
]);