Sign in Register
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
    Winnie
    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 1625 posts 7295 karma points MVP 7x c-trib
    Mar 15, 2023 @ 11:49
    Nik
    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
    Winnie
    0

    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 1932 posts 6722 karma points MVP 2x c-trib
    Mar 16, 2023 @ 13:48
    Huw Reddick
    100

    looking at your code, try @content.Key

    Copy Link
  • Winnie 7 posts 97 karma points
    Mar 16, 2023 @ 15:59
    Winnie
    0

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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

    Continue discussion

Please Sign in or register to post replies