locked
need my accordion to be proper. Right now, it wont work on first load RRS feed

  • Question

  • User1182587605 posted

    Hi, 

    I am using Accordion to achieve collapsible functionality in my navigation pane. I have a large code which is too clumsy when the page loads. Surely, I did not set the accordion tags properly. The parent and child div tags are ordered properly but the collapse functionality doesn't work as intended. First load, I need only the main headings to display and on click only the child tags should come up. Now, everything displays with some sub nodes collapsed. Please look at my code and help me modify it sothat I can achieve my functionality properly. Below is my code:

    <div id="masterdocuments">
                                        <h4 class="mb-0">
                                            <a class="LinkedObjects" id='' data-toggle="collapse" data-target="#ShowDocuments" aria-expanded="false" aria-controls="collapseOne">
                                                Registered Documents
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="DocumentResults" class="col-md-12" data-parent="#masterdocuments">
                                        <div class="col-md-12">
                                            @{
                                                var GenericDocumentCount = 0;
                                                var GenericDocumentOptionCount = 1;
                                                foreach (var document in Model.RegisteredDocs)
                                                {
    
                                                    var idFordocument = @document.Symbol + @GenericDocumentCount;
                                                    var idForDocumentOption = @document.Symbol + @GenericDocumentOptionCount;
                                                    var idfordocsmain = idForDocumentOption + @count;
    
                                                    <div id="ShowDocuments" class="">
                                                        <div class="parent-Cards" id="carrierParent">
                                                            <div class="parent-Card" id="@document.GuID">
                                                                <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocument" asp-route-GUID="@document.GuID" data-target="#@idFordocument" data-toggle="collapse" aria-expanded="false" aria-controls="">
                                                                    @document.DisplayName
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
    
                                                    <div id="@idFordocument" data-parent="#DocumentResults" class="collapse">
                                                        <div class="">
                                                            <div class="mb-0" id="@idfordocsmain">
                                                                <div class="col-md-1"></div>
                                                                <div class="col-md-11">
                                                                    <a class="LinkedObjects" id='' data-toggle="collapse" data-target="#idfordocumentoptions" aria-expanded="false" aria-controls="collapseOne">
                                                                        Output Options
                                                                    </a>
                                                                </div>
                                                                <div class="col-md-12" id="idfordocumentoptions" data-parent="#@idfordocsmain">
                                                                    <div class="col-md-4"></div>
                                                                    <div class="col-md-8">
                                                                        @{ foreach (var option in document.Options)
                                                                            {
                                                                                <div class="sidebar-item" data-parent="#@idFordocument">
                                                                                    <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentOption" asp-route-option="@JsonConvert.SerializeObject(@option)">
                                                                                        @option.Stock.ToString() , @option.Output.ToString()
                                                                                    </a>
                                                                                </div>
                                                                            }
                                                                        }
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                            }
                                        </div>
                                    </div>

    Monday, December 16, 2019 2:05 PM

Answers

  • User1535942433 posted

    Hi acmedeepak,

    Accroding to your codes,I found you missing add the class collapse on child elements that need to be collapsed.  I suggest you could try to add it and then it will work well.

    More details ,you could refer to below codes:

    <div id="masterdocuments">
    
            <h4 class="mb-0">
    
                <a class="LinkedObjects" id='' data-toggle="collapse" data-target="#ShowDocuments" aria-expanded="false" aria-controls="collapseOne">
    
                    Registered Documents
    
                </a>
    
            </h4>
    
        </div>
    
        <div id="DocumentResults" class="col-md-12" data-parent="#masterdocuments">
    
            <div class="col-md-12">
    
                @{
    
                    var GenericDocumentCount = 0;
    
                    var GenericDocumentOptionCount = 1;
    
                    var count = 1;
    
                    foreach (var document in Model.RegisteredDocs)
    
                    {
    
     
    
                        var idFordocument = @document.Symbol + @GenericDocumentCount;
    
                        var idForDocumentOption = @document.Symbol + @GenericDocumentOptionCount;
    
                        var idfordocsmain = idForDocumentOption + @count;
    
     
    
                        <div id="ShowDocuments" class="">
    
                            <div class="parent-Cards" id="carrierParent">
    
                                <div class="parent-Card" id="@document.GuID">
    
                                    <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocument" asp-route-GUID="@document.GuID" data-target="#@idFordocument" data-toggle="collapse" aria-expanded="false" aria-controls="">
    
                                        @document.DisplayName
    
                                    </a>
    
                                </div>
    
                            </div>
    
                        </div>
    
                        <div id="@idFordocument" class="collapse" data-parent="#DocumentResults">
    
                            <div class="mb-0" id="@idfordocsmain">
    
                                <div class="col-md-1"></div>
    
                                <div class="col-md-11">
    
                                    <a class="LinkedObjects" id='' data-toggle="collapse" data-target="#@idForDocumentOption" aria-expanded="false" aria-controls="collapseOne">
    
                                        Output Options
    
                                    </a>
    
                                </div>
    
                                <div id="@idForDocumentOption" class="collapse" data-parent="#@idfordocsmain">
    
                                    <div class="col-md-4"></div>
    
                                    <div class="col-md-8">
    
                                        @{ foreach (var option in document.Options)
    
                                            {
    
                                                <div class="sidebar-item">
    
                                                    <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentOption">
    
                                                        @option.Stock.ToString() , @option.Output.ToString()
    
                                                    </a>
    
     
    
                                                </div>
    
                                            }
    
                                        }
    
                                    </div>
    
                                </div>
    
                            </div>
    
                        </div>
    
                    }
    
                }
    
            </div>
    
        </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 17, 2019 9:37 AM

All replies

  • User1535942433 posted

    Hi acmedeepak,

    Accroding to your codes,I found you missing add the class collapse on child elements that need to be collapsed.  I suggest you could try to add it and then it will work well.

    More details ,you could refer to below codes:

    <div id="masterdocuments">
    
            <h4 class="mb-0">
    
                <a class="LinkedObjects" id='' data-toggle="collapse" data-target="#ShowDocuments" aria-expanded="false" aria-controls="collapseOne">
    
                    Registered Documents
    
                </a>
    
            </h4>
    
        </div>
    
        <div id="DocumentResults" class="col-md-12" data-parent="#masterdocuments">
    
            <div class="col-md-12">
    
                @{
    
                    var GenericDocumentCount = 0;
    
                    var GenericDocumentOptionCount = 1;
    
                    var count = 1;
    
                    foreach (var document in Model.RegisteredDocs)
    
                    {
    
     
    
                        var idFordocument = @document.Symbol + @GenericDocumentCount;
    
                        var idForDocumentOption = @document.Symbol + @GenericDocumentOptionCount;
    
                        var idfordocsmain = idForDocumentOption + @count;
    
     
    
                        <div id="ShowDocuments" class="">
    
                            <div class="parent-Cards" id="carrierParent">
    
                                <div class="parent-Card" id="@document.GuID">
    
                                    <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocument" asp-route-GUID="@document.GuID" data-target="#@idFordocument" data-toggle="collapse" aria-expanded="false" aria-controls="">
    
                                        @document.DisplayName
    
                                    </a>
    
                                </div>
    
                            </div>
    
                        </div>
    
                        <div id="@idFordocument" class="collapse" data-parent="#DocumentResults">
    
                            <div class="mb-0" id="@idfordocsmain">
    
                                <div class="col-md-1"></div>
    
                                <div class="col-md-11">
    
                                    <a class="LinkedObjects" id='' data-toggle="collapse" data-target="#@idForDocumentOption" aria-expanded="false" aria-controls="collapseOne">
    
                                        Output Options
    
                                    </a>
    
                                </div>
    
                                <div id="@idForDocumentOption" class="collapse" data-parent="#@idfordocsmain">
    
                                    <div class="col-md-4"></div>
    
                                    <div class="col-md-8">
    
                                        @{ foreach (var option in document.Options)
    
                                            {
    
                                                <div class="sidebar-item">
    
                                                    <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentOption">
    
                                                        @option.Stock.ToString() , @option.Output.ToString()
    
                                                    </a>
    
     
    
                                                </div>
    
                                            }
    
                                        }
    
                                    </div>
    
                                </div>
    
                            </div>
    
                        </div>
    
                    }
    
                }
    
            </div>
    
        </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 17, 2019 9:37 AM
  • User1182587605 posted

    Thanks yij sun,

    In the same form, I have a similar code which is still not working on placing class="collapse". Can you please direct me where I am wrong. My code for that part is:

    <div id="DocumentResults" class="col-md-12 collapse" data-parent="#AccordionParent">
                                            <div class="col-md-12">
                                                @{
                                                    var GenericDocumentCount = 0;
                                                    var GenericDocumentOptionCount = 1;
                                                    foreach (var document in Model.RegisteredDocs)
                                                    {
    
                                                        var idFordocument = @document.Symbol + @GenericDocumentCount;
                                                        var idForDocumentOption = @document.Symbol + @GenericDocumentOptionCount;
                                                        var idfordocsmain = idForDocumentOption + @count;
    
                                                        <div id="ShowDocuments">
                                                            <div class="parent-Cards">
                                                                <div class="parent-Card" id="@document.GuID">
                                                                    <a class="LinkedObjects collapsed" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocument" asp-route-GUID="@document.GuID" data-target="#@idFordocument" data-toggle="collapse" aria-expanded="false" aria-controls="">
                                                                        @document.DisplayName
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
    
                                                        <div id="@idFordocument" data-parent="#DocumentResults" class="collapse">
                                                            <div class="">
                                                                <div class="mb-0" id="@idfordocsmain">
                                                                    <div class="col-md-1"></div>
                                                                    <div class="col-md-11">
                                                                        <a class="LinkedObjects" id='GenericOutputOptions' data-toggle="collapse" data-target="#@idForDocumentOption" aria-expanded="false" aria-controls="collapseOne">
                                                                            Output Options
                                                                        </a>
                                                                    </div>
                                                                    <div class="col-md-12 collapse" id="@idForDocumentOption" data-parent="#@idfordocsmain">
                                                                        <div class="col-md-4"></div>
                                                                        <div class="col-md-8">
                                                                            @{ foreach (var option in document.Options)
                                                                                {
                                                                                    <div class="sidebar-item" data-parent="#@idFordocument">
                                                                                        <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentOption" asp-route-option="@JsonConvert.SerializeObject(@option)">
                                                                                            @option.Stock.ToString() , @option.Output.ToString()
                                                                                        </a>
                                                                                    </div>
                                                                                }
                                                                            }
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    }
                                                }
                                            </div>
                                        </div>

    The highlighted part is not collapsing down for me. Please direct me what is wrong. This is a different code which has similar lookout. I can send extra code which is over this content if needed as well.

    Tuesday, December 17, 2019 12:18 PM
  • User1535942433 posted

    Hi acmedeepak,

    Accroding to your codes, I created a test demo. It works well.
    Does it still have a layer of foreach on the outside?
    I suggest you could press F12 and select element in the page . Then check whether the data-target id  is same with the ID of the child node.
    Just do like this:

    Best regards,

    Yijing Sun

    Wednesday, December 18, 2019 10:05 AM