How to expand/collapse nested div with jQuery

Question

I have an expand/collapse using jQuery which works fine on the first level:

This is my razor file:

@model IntDashMakeRecAssgnmntsPoRespMngrVM

<div style="border:1px dotted blue;padding:5px">
    <div>
        <i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
    </div>
    <i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
    <i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
    <span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (@Model.Audits.Count())</span>
    <div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
        @foreach (var audit in Model.Audits)
        {
        <div>
            <i id="expandRecommendations@(audit.AuditID)" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations@(audit.AuditID)" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>@audit.AuditAcnCd</b></span>
            <div id="RecommendationDiv@(audit.AuditID)" style="margin-left:40px;padding:5px;border:0px dotted black">
            @foreach(var finding in audit.Findings)
            {
                foreach(var rec in finding.Recommendations)
                {
                    <div style="display:none;">
                    <a asp-controller="InternalRecommendations" asp-action="Details" asp-route-id="@rec.RecommendationId"
                       title="Make assignment for @audit.AuditAcnCd">
                        <b>@audit.AuditAcnCd/@finding.FindingCd/@rec.RecCd</b>
                    </a>
                    </div>
                }
            }
            </div>
        </div>
        }
    </div>
</div>

This is my jQuery:

$("#collapseMakeRecAssignments, #expandMakeRecAssignments").click(function () {
            $("#MakeRecommendationAssignmentsDiv").toggle();
            $("#collapseMakeRecAssignments, #expandMakeRecAssignments").toggle();
        });

This is very simple to make the first level expand and collapse.

But now I need the nested 3 newly shown divs in the expanded div to each expand.

This is the jQuery I am writing to try and expand the inner divs.

// Wire up dynamic toggle
        var expandNodes = $('i[id^="expandRecommendations"]');
        expandNodes.each(function (index) {
            console.log(this.id);
            console.log(parseInt(this.id.replace(/[^0-9\.]/g, ''), 10));
            expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
            expandNodeDivId = "RecommendationDiv" + expandNodeId;
            console.log("#" + expandNodeDivId)
            $("#" + expandNodeDivId).click(function (e) {
                $("#" + expandNodeDivId).toggle();
            });
         });

In this line: var expandNodes = $('i[id^="expandRecommendations"]'); I am getting all of my i tags that have a font awesome class (+ sign in a circle) acting as an expand button.

Now I roll through each of the "+ in a circle" buttons in the expandNodes collection and get the unique id I assigned to each of them with razor building on the server side (

<div id="RecommendationDiv@(audit.AuditID)" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">

and try to add a click event to each one to toggle itself which should show itself and the anchor divs nested inside of itself:

But it just won't won't expand.

Here are the console.logs showing I'm getting the right id's to call the element to expand:

These console.log lines show I am getting the write information to try to wire this up but I just can't get them to expand:

expandRecommendations279938 // the div I clicked on

279938 // able to parse the audit id from the id of the element I clicked on.

#RecommendationDiv279938 // concatenated the Text part of the element I want to expand with the id for the second part of the element to expands id.

Anyone see the problem here? Any help would be greatly appreciated.

UPDATE 1

Here is the HTML source produced from the server side.

<div style="border:1px dotted blue;padding:5px">
    <div>
        <i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
    </div>
    <i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
    <i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
    <span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (3)</span>
    <div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
        <div>
            <i id="expandRecommendations279938" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations279938" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>testOIGFinding1</b></span>
            <div id="RecommendationDiv279938" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4581">
                        <b>testOIGFinding1/4/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4582">
                        <b>testOIGFinding1/4/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4573">
                        <b>testOIGFinding1/7/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4574">
                        <b>testOIGFinding1/7/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4575">
                        <b>testOIGFinding1/7/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4576">
                        <b>testOIGFinding1/7/4</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4577">
                        <b>testOIGFinding1/7/5</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4578">
                        <b>testOIGFinding1/7/6</b>
                    </a>
                    </div>
            </div>
        </div>
        <div>
            <i id="expandRecommendations279939" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations279939" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>testOCFOFinding1</b></span>
            <div id="RecommendationDiv279939" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4579">
                        <b>testOCFOFinding1/1/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4583">
                        <b>testOCFOFinding1/1/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4584">
                        <b>testOCFOFinding1/1/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4585">
                        <b>testOCFOFinding1/1/4</b>
                    </a>
                    </div>
            </div>
        </div>
        <div>
            <i id="expandRecommendations279959" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
            <i id="collapseRecommendations279959" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
            <span style="margin-left:2px"><b>TestOigAllRecommendations</b></span>
            <div id="RecommendationDiv279959" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4586">
                        <b>TestOigAllRecommendations/1/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4587">
                        <b>TestOigAllRecommendations/1/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4588">
                        <b>TestOigAllRecommendations/1/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4589">
                        <b>TestOigAllRecommendations/2/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4590">
                        <b>TestOigAllRecommendations/2/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4591">
                        <b>TestOigAllRecommendations/2/3</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4592">
                        <b>TestOigAllRecommendations/3/1</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4593">
                        <b>TestOigAllRecommendations/3/2</b>
                    </a>
                    </div>
                    <div>
                    <a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4594">
                        <b>TestOigAllRecommendations/3/3</b>
                    </a>
                    </div>
            </div>
        </div>
    </div>
</div>

if you could add the html part only not server side, that would help troubleshoot or copy the html from the view source section and crete a demo that could have 2 to 3 levels — Muhammad Omer Aslam
that's good, can you add the specific CSS that is used for this section? that would help me sort the script faster as the layout would be working and the script could be investigated easier — Muhammad Omer Aslam
yeah i saw that so didnt answered good that you solved it by yourself :) — Muhammad Omer Aslam

Sam Sam · Accepted Answer · 2018-05-13T13:41:55

I figured it out.

Here is the revised JavaScript:

        // Wire up dynamic toggle
        var expandNodes = $('i[id^="expandRecommendations"]');
        expandNodes.each(function (index) {
            expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
            create_expand_toggle(expandNodeId);
         });

        function create_expand_toggle(nodeId) {
            $("#" + "expandRecommendations" + nodeId).click(function (e) {
                console.log("Clicking");
                $("#" + "RecommendationDiv" + nodeId).toggle();
            });
        }

I was referencing the same div I wanted to expand in the button click. I needed to make a second reference to the i tag with the font awesome + class acting as the button to hook up the click event.

Once tip. I tried to make a var for the two node id references and use them so it would be more readable. But then the click event for all three plus signs on that level show the same div. The last div. So I have to concatenate the ids in the create_expand_toggle function.

How to expand/collapse nested div with jQuery

1 Answers