Sign in Register
Go to solution
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

    Using Umbraco And Getting Started
    Umbraco 9

    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 1593 posts 7151 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

    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 1737 posts 6077 karma points MVP 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
Please Sign in or register to post replies

Write your reply to:

Draft