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.

  • Nik 1600 posts 7180 karma points MVP 6x 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

  • 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 -->
    
  • Huw Reddick 1788 posts 6198 karma points MVP c-trib
    Mar 16, 2023 @ 13:48
    Huw Reddick
    100

    looking at your code, try @content.Key

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

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

Please Sign in or register to post replies

Write your reply to:

Draft