Hide/show section based on buttonclick

Question

I'm working with Blazor HTML and I have a <section class="showContent"> containing a form that I only want to show to those who click the "yes" option, I want to hide the form by default. Here is my code:

            <h5 class="stath5"><span class="badge badge-secondary">5.</span> Business / Custom Work / Services</h5>
            <p class="forPurpose">For tax purposes</p>


            <p class="statp">Do you (or a non-member on your land) have business sales, custom work, or services of $10,000 a year or more yearly turnover?</p>


            <label class="label-yes">
                <input type="radio" class="option-input radio" name="example"/>
                Yes
            </label>

            <label>
                <input type="radio" class="option-input radio" name="example" />
                No
            </label>


            @*If yes, display the following; if no, do not @* *@






    <section class="showContent">

            <p class="statp">Please specify the amount for which you have  <span class="badge badge-danger">not</span> yet paid tax:</p>


            <EditForm Model="@businessData" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">
                <FluentValidator />


                <div class="individualForms">
                    <label class="statlabel" for="businessReselling"> Business / Reselling:</label><br />
                    <InputNumber id="businessReselling" class="input" @bind-Value="@businessData.BusinessResellingGross" onwheel="this.blur()" placeholder="$BZ" autofocus />
                    <ValidationMessage For="() => businessData.BusinessResellingGross" />
        </div>

                <br /><hr class="statHR" />


                <div class="individualForms">
                    <label class="statlabel" for="pavementTax"> Pavement tax:</label><br />
                    <InputNumber id="pavementTax" class="input" @bind-Value="@businessData.PavementTaxGross" onwheel="this.blur()" placeholder="$BZ" />
            <ValidationMessage For="() => businessData.PavementTaxGross" />
                </div>


                <br /><hr class="statHR" />

                <div class="individualForms">
                    <label class="statlabel" for="customWrkServices"> Custom Work / Services:</label><br />
                    <InputNumber id="customWrkServices" for="customWrkServices" class="input" @bind-Value="@businessData.CustomWorkServicesGross" onwheel="this.blur()" placeholder="$BZ" />
                    <ValidationMessage For="() => businessData.CustomWorkServicesGross" />
        </div>


            </EditForm>

    </section>

This may seem simple, but I have tried some methods listed online which have not worked for my purpose.

Answer 1

Easiest way is to introduce a bool variable and wrap your <section> inside it:

razor page:

<label class="label-yes">
    <input type="radio" class="option-input radio" name="example" @onchange="OnUpdated"/>
    Yes
</label>

@if (ShowSection)
{
    <section class="showContent">
        ...
    </section>
}

code:

Change ShowSection = true when you want to show the section and false when you want to hide it:

public bool ShowSection { get; set; }

public void OnUpdated(ChangeEventArgs e)
{
    ShowSection = ((bool)e.Value);
}