CODEWITHSUNDEEP
htmlblazor
core114
core114

Reputation: 5325

blazor hide current div and show new one

I m tried to click @onclick="@Toggle" and hide current div and then show the new div , but its not worked for me

here the issue

#my current div is not hide and new div section not showing there

any one know the solution

thanks

code here

      <div class="sh-agreement-tp" style="background-color: #fff; padding: 20px;">
    
                        @*  AgreementTemplate section one *@
                        <Row Gutter="(24, 24)">
                            <Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6"><a  @onclick="@Toggle" >
                                <Card class="sh-agreement-tm" Bordered="false">
                                    <Body>
                                        <div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry One</p></div>
                                    </Body>
                                </Card>
                            </a>
                            </Col>
                            <Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
                            <Card class="sh-agreement-tm" Bordered="false">
                                <Body>
                                    <div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry  Two</p></div>
                                </Body>
                            </Card>
                            </Col>
                            <Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
                            <Card class="sh-agreement-tm" Bordered="false">
                                <Body>
                                    <div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Three</p></div>
                                </Body>
                            </Card>
                            </Col>
                            <Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
                            <Card class="sh-agreement-tm" Bordered="false">
                                <Body>
                                    <div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Four</p></div>
                                </Body>
                            </Card>
                            </Col>
                        </Row>











<div><p hidden="@(!HideLabel)">New section here </p></div>


    </div>
                        @*  END of AgreementTemplate section one *@

 @code {
      private bool HideLabel   {get;set;} = false;
      private void Toggle()
      {
         HideLabel =   !HideLabel;
      }      
 }

Upvotes: 3

Views: 2755

Answers (2)

Henk Holterman
Henk Holterman

Reputation: 273244

This code works well:

<div hidden="@showPanel2">Panel 1</div>
<div hidden="@(!showPanel2)">Panel 2</div>

<button class="btn btn-primary" @onclick="Toggle">Click me</button>

@code
{
    bool showPanel2 = false;
    void Toggle() { showPanel2 = !showPanel2; }
}

So I suspect that your Toggle() never gets called.
Try to debug that.

Upvotes: 4

Surinder Singh
Surinder Singh

Reputation: 1450

You are doing it a wrong way, you can hide any div or paragraph like this

To hide div

<div style="visibility: @(HideLabel ? "hidden" : "visible")"><p>New section here </p></div>

To hide paragraph

<div><p style="visibility: @(HideLabel ? "hidden" : "visible")">New section here </p></div>

Upvotes: 1

Related Questions