moadiran/TaxPayerFull/Layout/ItemQuestion.razor

@using Shared.DTOs
@if (!string.IsNullOrEmpty(headingName) && !string.IsNullOrEmpty(collapseName))
{
    <div class="accordion-items">
        <h2 class="accordion-header" id="@headingName.Trim()">
            <button class="accordion-buttons collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#@collapseName.Trim()" aria-expanded="false" aria-controls="@collapseName">
                @qitem?.Title
                <span class="accordion-btn"></span>
            </button>
        </h2>
        <div id="@collapseName.Trim()" class="accordion-collapse collapse" aria-labelledby="@headingName.Trim()" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                @qitem?.Answer
            </div>
        </div>
    </div>
}


@code {
    [Parameter]
    public QuestionDto? qitem { get; set; }
    private static Random random = new Random();
    public string headingName { get; set; }
    public string collapseName { get; set; }
    public static string RandomString(int length)
    {
        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        return new string(Enumerable.Repeat(chars, length)
            .Select(s => s[random.Next(s.Length)]).ToArray());
    }

    protected override async Task OnParametersSetAsync()
    {
        string str = RandomString(3);
        headingName = "heading" + str;
        collapseName = " collapse" + str;
        await base.OnParametersSetAsync();
    }
}