Search code examples
countumbracowai-ariabootstrap-accordion

Accordion doesn't automatically count

My accordion doesn't automatically count up, the number stays at 1 for some reason. I am using a CMS called Umbraco on version 7.7.2.

Here's my code:

@if(@Model.Content.GetPropertyValue("titleAccordeon") != "")
{
  <section class="block block__accordion">
    <div class="container">
        <div class="row">
            <div class="block__heading col-md-12">
                <h3>@Model.Content.GetPropertyValue("titleAccordeon")</h3>
                <p>@Model.Content.GetPropertyValue("introAccordeon")</p>
            </div>
            @if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
            {
                foreach (var item in Model.Content.Accordion)
                {
                    var guid = Guid.NewGuid();
                    <div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
                        <div class="accordion__item">
                            <a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-@guid" aria-expanded="false" aria-controls="accordion-@guid">
                                 @item.Title
                            </a>

                            <div class="collapse" id="accordion-@guid">
                                <div class="accordion__item__body">
                                    @item.Description
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }
        </div>
    </div>
</section>

And this is the result on one of the pages:

enter image description here

All the accordions have a different control-id thanks to the guid. Any idea why it doesn't count up?

Solution

  • I managed to get the code working. I moved one of the div's outside the if code and it worked. Not sure why the div made the accordions count though. Thanks to hardba11 and ADyson for trying to help!

     <div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
            @if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
            {
                foreach (var item in Model.Content.Accordion)
                {

                    var guid = Guid.NewGuid();

                        <div class="accordion__item">
                            <a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-@guid" aria-expanded="false" aria-controls="accordion-@guid">
                                     @item.Title
                            </a>
                            <div class="collapse" id="accordion-@guid">
                                 <div class="accordion__item__body">
                                    @item.Description

                                </div>
                            </div>
                        </div>
                }
            }
            </div>