Showing a textfield upon button click

form.xml

<xh:html xmlns:xh="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms"
         xmlns:xs="http://www.w3.org/2001/XMLSchema"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xi="http://www.w3.org/2001/XInclude"
         xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
         xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
         xmlns:map="http://www.w3.org/2005/xpath-functions/map"
         xmlns:array="http://www.w3.org/2005/xpath-functions/array"
         xmlns:exf="http://www.exforms.org/exf/1-0"
         xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
         xmlns:saxon="http://saxon.sf.net/"
         xmlns:sql="http://orbeon.org/oxf/xml/sql"
         xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
         xmlns:fb="http://orbeon.org/oxf/xml/form-builder"
         fr:data-format-version="4.0.0">
    <xh:head>
        <xh:title>Untitled Form</xh:title>
        <xf:model id="fr-form-model" xxf:expose-xpath-types="true" xxf:analysis.calculate="true">

            
            <xf:instance id="fr-form-instance" xxf:exclude-result-prefixes="#all" xxf:index="id">
                <form>
                    <section-1>
                        <grid-1>
                            <button/>
                            <textfield/>
                        </grid-1>
                        
                    </section-1>
                </form>
            </xf:instance>

            
            <xf:bind id="fr-form-binds" ref="instance('fr-form-instance')">
                <xf:bind id="section-1-bind" name="section-1" ref="section-1">
                    <xf:bind id="grid-1-bind" ref="grid-1" name="grid-1">
                        <xf:bind id="textfield-bind" name="textfield" ref="textfield" xxf:whitespace="trim"
                                 relevant="$button = 'show-textfield'"/>
                        <xf:bind id="button-bind" ref="button" name="button"/>
                    </xf:bind>
                    
                </xf:bind>
            </xf:bind>

            
            <xf:instance id="fr-form-metadata" xxf:readonly="true" xxf:exclude-result-prefixes="#all">
                <metadata>
                    <application-name>a</application-name>
                    <form-name>a</form-name>
                    <title xml:lang="en">Untitled Form</title>
                    <description xml:lang="en"/>
                    <created-with-version>2019.1-SNAPSHOT PE</created-with-version>
                    <updated-with-version>2019.1-SNAPSHOT PE</updated-with-version>
                    <library-versions>
                        <orbeon>1</orbeon>
                    </library-versions>
                </metadata>
            </xf:instance>

            
            <xf:instance id="fr-form-attachments" xxf:exclude-result-prefixes="#all">
                <attachments/>
            </xf:instance>

            
            <xf:instance xxf:readonly="true" id="fr-form-resources" xxf:exclude-result-prefixes="#all">
                <resources>
                    <resource xml:lang="en">
                        <button>
                            <label>Click me to show the text field</label>
                            <hint/>
                        </button>
                        <section-1>
                            <label>My section</label>
                        </section-1>
                        <textfield>
                            <label>Textfield</label>
                            <hint/>
                            
                        </textfield>
                    </resource>
                </resources>
            </xf:instance>

        </xf:model>
    </xh:head>
    <xh:body>
        <fr:view>
            <fr:body xmlns:xbl="http://www.w3.org/ns/xbl" xmlns:p="http://www.orbeon.com/oxf/pipeline"
                     xmlns:oxf="http://www.orbeon.com/oxf/processors">
                <fr:section id="section-1-section" bind="section-1-bind">
                    <xf:label ref="$form-resources/section-1/label"/>
                    <fr:grid id="grid-1-grid" bind="grid-1-bind">
                        <fr:c x="1" y="1" w="6">
                            <xf:trigger id="button-control" bind="button-bind">
                                <xf:label ref="$form-resources/button/label"/>
                    
                                <xf:hint ref="$form-resources/button/hint"/>
                                <xf:alert ref="$fr-resources/detail/labels/alert"/>
                    
                            </xf:trigger>
                        </fr:c>
                        <fr:c x="7" y="1" w="6"/>
                        <fr:c y="2" x="1" w="6">
                                <xf:input id="textfield-control" bind="textfield-bind">
                                    <xf:label ref="$form-resources/textfield/label"/>
                                    <xf:hint ref="$form-resources/textfield/hint"/>
                                <xf:alert ref="$fr-resources/detail/labels/alert"/>
                                    
                                </xf:input>
                            </fr:c>
                        <fr:c y="2" x="7" w="6"/>
                    </fr:grid>
                </fr:section>
            </fr:body>
        </fr:view>
    </xh:body>
</xh:html>