Home > front end >  How to toggle a class in Blazor on button click?
How to toggle a class in Blazor on button click?

Time:01-20

I've currently got an onclick event that toggles a class like so:

....
<button id="@m.TargetCo.ButtonId" onclick="glyphChanger(this.id)"  ></button>
....
function glyphChanger(buttonID) {
    $("#"   buttonID).toggleClass('glyphicon-chevron-right glyphicon-chevron-up');
}

CodePudding user response:

No need javascript. You can do this the Blazor way.

DropDownComponent.razor

<h3>Debug: @buttonCss</h3>
<button type="button"  @onclick="ChangeButtonClass">Test</button>

@code {
    private string buttonCss = "glyphicon-chevron-right";
    private void ChangeButtonClass()
    {
        buttonCss = buttonCss == "glyphicon-chevron-right" ? "glyphicon-chevron-up" : "glyphicon-chevron-right";
    }
}

Somewhere else in the application

<DropDownComponent/>
<DropDownComponent/>
<DropDownComponent/>
<DropDownComponent/>
  • Related