how to iterate id in a block list for an accordion umbraco 11 - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Winnie 7 posts 97 karma points

Mar 15, 2023 @ 10:32
0

How to iterate ID in a Block List for an Accordion - Umbraco 11
So I'm using a Block List to create an Accordion. On principle, it works and renders correctly, but my problem is that my code requires a unique ID on the heading and the collapsed part to work. I'm using Bootstrap 4 and Umbraco 11.

Here is the HTML for each accordion item in the partial view:
```
<div class="card">
<h3 class="card-header collapsed" id="heading1" href="#" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">@content.AccordionHeading</h3>
<div id="collapse1" class="collapse" data-parent="#faq-accordion">
    <div class="card-body">
        @content.AccordionContent           
    </div>
</div>
```
What I need is code that will automatically iterate the number in #heading and #collapse so that it does not open all cards at the same time.

I was thinking the best way to do it would be with JavaScript. But I am not entirely sure.
Copy Link
Nik 1614 posts 7260 karma points MVP 7x c-trib

Mar 15, 2023 @ 11:49
0
Hi Winnie,

Each element in the blocklist has a unique key against it. That is what I would typically use as the unique id.
```
id="[email protected]"
```
This saves any double iteration and ensure the header and content stay connected.

Thanks

Nik
Copy Link

Winnie 7 posts 97 karma points

Mar 16, 2023 @ 12:41

I did not know that.

I tired it, but it doesn't work. The error says "The name 'blocklistItem' does not exist in the current context". So I'm guessing I need to define it or something.

Sorry, I'm very new to this.

Here is the entire partial view:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem<ContentModels.Accordion>>;
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Core.Models;

@{
    var content = (ContentModels.Accordion)Model.Content;
}
<div class="card">
    <h3 class="card-header collapsed" href="#" data-toggle="collapse" data-target="#[email protected]" aria-expanded="true" aria-controls="[email protected]">@content.AccordionHeading</h3>
    <div id="[email protected]" class="collapse" data-parent="#faq-accordion">
        <div class="card-body">
            @content.AccordionContent
        </div>
    </div>
</div><!-- card end -->

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 16, 2023 @ 13:48

100

looking at your code, try @content.Key

Copy Link
Winnie 7 posts 97 karma points

Mar 16, 2023 @ 15:59

0

That was the only one I had not tried. Thanks.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

How to iterate ID in a Block List for an Accordion - Umbraco 11