How to collapse/expand Razor components using Blazor syntax?

Question

I'm currently implementing a form to create a new user along with their respective user rights. In this form, I have about 30 different IT systems and if the user account should have the access rights for that specific IT system, I want to provide a panel to the admin where some extra information must be entered regarding that specific IT system. I want to implement this using razor components. What I have so far is the core view for my "new user form" as well as a razor component for the additional information of a specific IT system. By clicking the + button, I want the component to be visible / expand right below the IT system. That's what It looks like so far:

The new user form:

 
                GOODWILL PKW/Smart
                
                    Add
                    
                
                
                    Change
                    
                
                
                    Remove
                    
                
                                    
                    
                

            
            

@code {

public void collapseGoodwill() {     


        }

}

The component:


    
        Goodwill PKW/smart
    

    
        
            
                Profile

                
                    
                    Salesman
                
                
                    
                    Administrator

Normally, I would use JQuery in the "collapseGoodwill" method to add a .collapse class to this element. But since I am experimenting with Blazor, I'd like to know if there is a 100% Javascript /JQuery free way of doing this.

Thanks!

user_10091607 · Answer

Within Blazor, you always follow the pattern:

change data 
    --> new view rendered

Anytime you want to change the component's UI from outside, you should do it by changing the data (model/state/parameter/context/...).

As for this scenario, you can add a Collapsed field to indicate whether the panel itself is collapsed now:


    
        Goodwill PKW/smart
    

    
        
            
                Profile

                
                    
                    Salesman
                
                
                    
                    Administrator
                                
            
        
    


@code{
    [Parameter]
    public string Collapse{get;set;}="collapse"; // hide by default
}

And whenever you want to collapse it, just set this parameter to collapse:


    GOODWILL PKW/Smart
    
        Add
        
    
    
        Change
        
    
    
        Remove
        
    
                        
        
    



@code {
    private bool Collapsed = true;
}

Demo:

[Edit] : we can even refactor the above code to expose less information by changing the field from string to boolean.

The ModalGoodwillPKW.razor:

 ">
    
        Goodwill PKW/smart
    

   ...


@code{
    [Parameter]
    public bool Collapsed{get;set;}= true; // hide by default
}

The UserForm.razor:


    ...
                     
        
    

Collapsed="@Collapsed" >

@code {
    private bool Collapsed = true;
}

user_1285450 · Answer

I had a similar issue, I had a dynamic list of sections that I wanted to collapse, and I couldn't get the bootstrap data-toggle approach to work due to Blazor mis-handling of # anchor tags.

I used the component idea:


@if (Collapsed)
{
    
}
else
{ 
    
}
@Title


@if(!Collapsed)
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public bool Collapsed { get; set; }
    [Parameter]
    public string Title { get; set; }

    void Toggle()
    {
        Collapsed = !Collapsed;
    }
}

Which I could then use like this:

            @foreach (var i in c.Request)
        {
            
                
                    @foreach (var kvp in i.Values)
                    {
                        
                            
                            @kvp.Key
                            @kvp.Value
                        
                    }
                
            
        }

This seems to work well, each section is independently collapsible. I've not tried it nested though.

user_12157575 · Answer

Blazor "#Collapse" div with Bootstrap Toggle Button

I took @cjb110 's excellent sample code above and changed it to use a bootstrap badge button as the toggle, which is how I often add more verbose help info to a form field group, by hiding it behind a toggle and using a bootstrap or material info button for if a user wants it.

Component Part

Here's the component part, which you'd probably add to your Blazor solution's Client project's Shared folder as file name Collapsible.razor (note: Blazor component file names are to be capitalized--I think)


  @Title

    @if (Collapsed)
    {
       
    }
    else
    { 
       
    }
  
    @LabelText
    


@if(!Collapsed)
{
  
    @ChildContent
  
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public bool Collapsed { get; set; }

    //input params coming from from page
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string ButtonText { get; set; }
    [Parameter]
    public string LabelText { get; set; }

    void Toggle()
    {
        Collapsed = !Collapsed;
    }
}

Template Part

I call this the "template" part. You can change the Title text, ButtonText, I use these info-btn toggles typically in forms, so I added a tag with LabelText.

In the area, in the component file I set it up as a Bootstrap alert class div, so it doesn't require a

tag, but put anything in here you want to show up when the toggle is opened.




    
        Find a person, add their role to the product (i.e.: Estimator, Foreman, Customer)

user_4291005 · Answer

I was facing issues with the accordion collapse in my project.

This is how I fixed the bootstrap collapse issue in my Blazor app.

I simply copied these dependencies in the index.html file in Blazor webapp and it worked fine.

Reference: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_collapsible&stacked=h

Let us know if this works for anyone else

user_3433178 · Answer

There are some long and good answers. I thought I'd come in with the most important punchline, though.

You can hide whatever you want based on C# conditional logic. So you will VERY often use something like:

Click on me to show the hidden control.

@if (IsOpened){
    
}

@code {
     bool IsOpened;
}

How to collapse/expand Razor components using Blazor syntax?

5 Answers

Demo:

Blazor "#Collapse" div with Bootstrap Toggle Button

Component Part

Template Part