Как заставить аккордеон работать! (Blazer & Js)

Нашёл на просторах инета простой аккордеон, подрубил всё выглядит прекрасно, но не заводиться js?

добавил в файл _Host.cshtml в секцию script

html

@if (_Info == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    @foreach (var item in _Info)
    {
        <div class="container">
            <h4>@item.Key.</h4>
            @foreach (var i in item.Value)
            {
                @foreach (var b in i.Body)
                {
                    <div class="accordion">
                        <div class="accordion-item">
                            <button id="accordion-button-1" aria-expanded="false">
                                <span class="accordion-title">@b.Date.ToString("F")</span><span class="icon" aria-hidden="true"></span>
                            </button>
                            <div class="accordion-content">                                    
                                <h5>@b.Content</h5>
                                <hr/>
                            </div>
                        </div>
                    </div>
                }
            }
        </div>
    }
}

_Host.cshtml


<script>
const items = document.querySelectorAll(".accordion button");

function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  
  for (i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}

items.forEach(item => item.addEventListener('click', toggleAccordion));
</script>

пробовал вызвать через

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("toggleAccordion");

        StateHasChanged();
    }
}

хотя не уверен, что так правильно )
и ещё пару методов, но не сработало пишет Microsoft.JSInterop.JSException: this.getAttribute is not a function

Как можно завести js?


Ответы (0 шт):