HTML CSS Js - Collapsible tree, show collapse when opened

Question

I'm using the example here https://codepen.io/ac_coding/pen/wMmKgb to create a collapsible menu, but I want the menu to be fully collapsed when opened.

I tried adding some changes to Javascript like

$('toggleClass').click()

But so far I've had no luck.

Javascript is hard to understand because I'm very new to it.

Any help on how I can ensure the page opens with all options collapsed would be greatly appreciated.

Thank you very much in advance.

/*
    THIS CODE WILL HELP (IT'S NECESSARY) TO CREATE THE "FLOWCHART VIEW" STYLE
    ON THE LIST WITH "FLOWCHART" STYLE SELECTED.
*/
$(document).ready(function(){

    // THIS FUNCTION ALLOW IE TO DEAL WITH "GET ELEMENTS BY CLASS NAME"
    function getElementsByClassName(node, classname) {
        var a = [];
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++)
            if(re.test(els[i].className))a.push(els[i]);
        return a;
    }

    // this variable will just check if we are on a template with a flowchart inside.
    var flowcharts = getElementsByClassName(document.body,'flowchart');  // no document
    
    // IN CASE THERE IS A FLOWCHART LIST, THE FUN WILL START
    if($(flowcharts).html() != undefined){
    // FIRSTLY IT'S COUNTED HOW MANY FLOWCHART ARE THERE
    for(var m = 0; m < flowcharts.length; m++){
            var tempFlowchart = flowcharts[m];
            var collapseOption = ''; // THIS VARIABLE WILL BE USED AS A SETTING TO FOLD OR NOT THE FLOWCHART
            
            // UMBRACO RETURN THE TEXT INSIDE "LI" WITHOUT "P", SO WE NEED TO GET ALL OF THEM AND MAKE IT PROPERLY
            var paragraphsList = tempFlowchart.getElementsByTagName('li');
            for(var i = 0; i < paragraphsList.length; i++){
                var tempParagraph = paragraphsList[i];
                
                // NEXT CONDITION WILL LOOK FOR THE SETTING TO FOLD OR UNFOLD THE FLOWCHART
                if(collapseOption === ''){
                // IF THE WORD COLLAPSE IS IN THE FIRST PARAGRAPH BETWEEN '*' ...
                var settingsRemoved = $(tempParagraph).html(),
                    settings = settingsRemoved.split('*');
                // ...WE TAKE IT OUT FROM THE TEXT, AND SAVE IT FOR LATER IN A VARIABLE
                collapseOption = settings[1];
                // THE ORIGINAL HTML IS OVERWRITTEN WITH THE NEW ONE, WITHOUT "COLLAPSE" ON IT
                $(tempParagraph).html(settings[2]);
                }
                
                // THIS FUNCTION WILL CUT OUT ANY TEXT BETWEEN [ AND ], AND IT WILL BE ADDED AS "TITLE" TO THE PARAGRAPH
                var html = $(tempParagraph).html(),
                    lText = html.split('['),
                    rText = html.split(']');
                    
                if (typeof rText[0] === "undefined")
                    {rText[0] = ""}  
                if (typeof rText[1] === "undefined")
                    {rText[1] = ""}  
                if (typeof lText[0] === "undefined")
                    {lText[0] = ""} 
                if (typeof lText[1] === "undefined")
                    {lText[1] = ""}
                    
                var titleText = lText[1].split(']');
                $(tempParagraph).attr({ title: titleText[0] });
                $(tempParagraph).html(lText[0]+rText[1]);
                
                var finalParagraph = $(tempParagraph).html();
                
                // IF THERE IS NOT CHILDS, IN WON'T HAVE FOLDED MENU ICON
                if($(tempParagraph).next('ul').text() == ''){
                    $(tempParagraph).text('');
                    if($(tempParagraph).parent().prop("class") === 'flowchart'){
                        $(tempParagraph).append("<p class='finalLink firstLevel'>"+ finalParagraph +"</p>");
                    }else if($(tempParagraph).parent().parent().prop("class") === 'flowchart'){
                        $(tempParagraph).append("<p class='finalLink secondLevel'>"+ finalParagraph +"</p>");
                    }else{
                        $(tempParagraph).append("<p class='finalLink thirstLevel'>"+ finalParagraph +"</p>");
                    }
                }else // IT WILL HAVE FOLDED MENU ICON IF THERE IS CHILDS
                {
                    $(tempParagraph).text('');
                    if(collapseOption =="collapse"){
                        $(tempParagraph).append("<div class='menuBox'><span class='notclicked'></span></div><p>"+ finalParagraph +"</p>");
                    }else{
                        $(tempParagraph).append("<div class='unfoldArrow'></div><p>"+ finalParagraph +"</p>");
                    }
                }
            };
            
            // WITH THE NEXT CLASSES WE WILL ADD A LINE AT LEFT SIDE IN CASE THERE IS MORE SECTIONS IN THE SAME LEVEL
            var list = tempFlowchart.getElementsByTagName('ul');
            for(var i = 0; i < list.length; i++){
                var temp = list[i];
                if($(temp).next('li').text() != ''){
                    // LONGER WILL ADD THE LINE
                   $(temp).addClass('longer');
                }else{
                    // SHORT WON'T ADD THE LINE
                    $(temp).addClass('short');
                }
            }
            
                // CREATE A NEW DIV WITH A CLASS CALLED "FLOWCHART"
            $(tempFlowchart).before("<div class='flowchart flowchartSerial_" + (m+1) + "'></div>");
                // SAVE THE CONTENT OF OUR NEW DIV
            var flowChartDiv = $('div.flowchartSerial_'+ (m+1));
            $(flowChartDiv).append($(tempFlowchart));
            
            // IF 'COLLAPSE' WAS WRITTEN AT THE BEGINNIG OF THE FLOWCHART, IT WILL BE COLLAPSED
            if(collapseOption == "collapse"){
                $(flowChartDiv).children('ul').children('ul').addClass('opened');
                $(flowChartDiv).children('ul').children('ul').slideToggle(350);
                $(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("clicked");
                $(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("notclicked");
                flowchartSlideTest(flowChartDiv);
            // OTHERWISE, IT WILL BE NO COLLAPSED
            }else{
                // THE CLASSES LONGER AND SHORT HAVE A DISPLAY:NONE PROPERTY
                // SO THIS WILL OVERWRITE THAT PROPERTIES AND WILL EXPAND ALL
                $(flowChartDiv).find('.longer').show();
                $(flowChartDiv).find('.short').show();
            }
        }
    }
});

function flowchartSlideTest(variable){

$(variable).find('.menuBox').click(function(event){
    var div = $(this).parent('li').next('ul');
    
    if($(div).html() != undefined){
        var open = $(variable).children('ul').children('ul').find('.opened');
        // IF WE OPENED ANOTHER SECTION BEFORE, IT WILL BE CLOSED BEFORE OPENING THE NEW ONE
        if($(open).html() != $(div).html()){
            if(!$(this).parent().parent().hasClass('opened')){
                $(open).each(function() {
                $(this).toggleClass("opened");
                $(this).slideToggle(350);
                $(this).prev('li').children().children().toggleClass("clicked");
                $(this).prev('li').children().children().toggleClass("notclicked");
            });
            }
        }
        
        $(div).each(function(i) {
            $(div).slideToggle(350);
            $(div).toggleClass("opened");
        });
        
        $(this).children().toggleClass("clicked");
        $(this).children().toggleClass("notclicked");
    };

$(variable).children('ul').children('ul').removeClass('opened');
});
};

.flowchart{width: 500px;margin:0 auto 15px;}
.flowchart .longer{
/*  border-left:1px solid #C5C5C5; */
    padding-left: 15%;
    margin-left: -15px /*!important*/;
    display:none;
}
.flowchart .short{
    padding-left: 15%;
    margin-left: -15px /*!important*/;
    display:none;
}
.flowchart p, .flowchart a, .flowchart li, .flowchart span{color:#fff !important;*color:#000;text-align:left;text-decoration: none;text-decoration: none !important;border-bottom:none !important;}
.flowchart ul{list-style:none;margin: 0;padding: 0;}
.flowchart ul li{margin-top: 10px;}
.flowchart ul li p{margin:0;padding: 5px;padding-left: 30px;background: #f47321;}
.flowchart ul li ul li p{background: #A8B2BB;}
.flowchart ul ul{margin-left: 70px;}
.flowchart ul ul li{
    border-left:1px solid #C5C5C5;
    margin: 0 0 0 -15px;
    padding: 8px 0 0 15px;
}
.flowchart ul ul li:after{
    content: "-";
    color: #fff;
    float: left;
    margin-left: -16px;
    margin-top: -21px;
    border-left: 1px solid #C5C5C5;
    border-bottom: 1px solid #C5C5C5;
    padding-right: 10px;
}
.flowchart ul ul li p{background:#7686c2;}
.flowchart ul ul ul{margin-left: 15%;}
.flowchart .short ul ul ul ul ul ul ul ul, .flowchart .longer ul ul ul ul ul ul ul ul{padding-left: 40px;}

/** COMPARE LATER WITH MENUBOX OF SIDENAV **/
.flowchart .menuBox{
cursor: pointer;
width: 18px;
float: left;
height: 22px;
margin-left: 6px; /* IE8 and below */
margin-top:3px;
}
.flowchart .unfoldArrow{
    width: 18px;
    float: left;
    height: 22px;
    margin-left: 6px;
    background: url(/images/sidebarMenu/downMenu-arrow-white.gif) no-repeat 9px 4px;
}
.flowchart .finalLink{
background-image: url(/images/sidebarMenu/menu-arrow-white.gif);
background-repeat: no-repeat;
background-position:9px 4px;
}
.flowchart .firstLevel{
background-color:#f47321;
}
.flowchart .secondLevel{
background-color:#7686c2;
}
.flowchart .thirstLevel{
background-color:#98a2d2;
}
.flowchart span {
margin-top: -2px;
display: list-item;
-webkit-box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
    
background:url(/images/sidebarMenu/menu_icon_for_IE.gif) no-repeat; /* IE8 and below */
margin-top: 3px; /* IE8 and below */
height:16px; /* IE8 and below */
}
.flowchart .clicked{
    margin-left: 9px;
    width: 1px;
    -webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    
    margin-left: 8px; /* IE8 and below */
    width: 4px; /* IE8 and below */
}
.flowchart .notclicked{
    width: 16px;
    -webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    
    width:20px; /* IE8 and below */
    height:16px; /* IE8 and below */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="flowchart">
<li>*collapse*Element 01 (level 01)</li>
<ul>
<li>Child 01 of Element 01 (level 02)</li>
</ul>
<li>Element 02 (level 01)</li>
<ul>
<li>Child 01 of Element 02 (level 02)</li>
<ul>
<li>Child of Element 02 (level 03)</li>
<ul>
<li>Child of Element 02 (level 04)</li>
</ul>
</ul>
<li>Child 02 of Element 02 (level 02)</li>
</ul>
<li>Element 03 (level 01)</li>
</ul>

Answer 1

You need to use an inspector to get the correct selector

$('ul.longer .menuBox').trigger("click");

/*
    THIS CODE WILL HELP (IT'S NECESSARY) TO CREATE THE "FLOWCHART VIEW" STYLE
    ON THE LIST WITH "FLOWCHART" STYLE SELECTED.
*/
$(document).ready(function(){

    // THIS FUNCTION ALLOW IE TO DEAL WITH "GET ELEMENTS BY CLASS NAME"
    function getElementsByClassName(node, classname) {
        var a = [];
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++)
            if(re.test(els[i].className))a.push(els[i]);
        return a;
    }

    // this variable will just check if we are on a template with a flowchart inside.
    var flowcharts = getElementsByClassName(document.body,'flowchart');  // no document
    
    // IN CASE THERE IS A FLOWCHART LIST, THE FUN WILL START
    if($(flowcharts).html() != undefined){
    // FIRSTLY IT'S COUNTED HOW MANY FLOWCHART ARE THERE
    for(var m = 0; m < flowcharts.length; m++){
            var tempFlowchart = flowcharts[m];
            var collapseOption = ''; // THIS VARIABLE WILL BE USED AS A SETTING TO FOLD OR NOT THE FLOWCHART
            
            // UMBRACO RETURN THE TEXT INSIDE "LI" WITHOUT "P", SO WE NEED TO GET ALL OF THEM AND MAKE IT PROPERLY
            var paragraphsList = tempFlowchart.getElementsByTagName('li');
            for(var i = 0; i < paragraphsList.length; i++){
                var tempParagraph = paragraphsList[i];
                
                // NEXT CONDITION WILL LOOK FOR THE SETTING TO FOLD OR UNFOLD THE FLOWCHART
                if(collapseOption === ''){
                // IF THE WORD COLLAPSE IS IN THE FIRST PARAGRAPH BETWEEN '*' ...
                var settingsRemoved = $(tempParagraph).html(),
                    settings = settingsRemoved.split('*');
                // ...WE TAKE IT OUT FROM THE TEXT, AND SAVE IT FOR LATER IN A VARIABLE
                collapseOption = settings[1];
                // THE ORIGINAL HTML IS OVERWRITTEN WITH THE NEW ONE, WITHOUT "COLLAPSE" ON IT
                $(tempParagraph).html(settings[2]);
                }
                
                // THIS FUNCTION WILL CUT OUT ANY TEXT BETWEEN [ AND ], AND IT WILL BE ADDED AS "TITLE" TO THE PARAGRAPH
                var html = $(tempParagraph).html(),
                    lText = html.split('['),
                    rText = html.split(']');
                    
                if (typeof rText[0] === "undefined")
                    {rText[0] = ""}  
                if (typeof rText[1] === "undefined")
                    {rText[1] = ""}  
                if (typeof lText[0] === "undefined")
                    {lText[0] = ""} 
                if (typeof lText[1] === "undefined")
                    {lText[1] = ""}
                    
                var titleText = lText[1].split(']');
                $(tempParagraph).attr({ title: titleText[0] });
                $(tempParagraph).html(lText[0]+rText[1]);
                
                var finalParagraph = $(tempParagraph).html();
                
                // IF THERE IS NOT CHILDS, IN WON'T HAVE FOLDED MENU ICON
                if($(tempParagraph).next('ul').text() == ''){
                    $(tempParagraph).text('');
                    if($(tempParagraph).parent().prop("class") === 'flowchart'){
                        $(tempParagraph).append("<p class='finalLink firstLevel'>"+ finalParagraph +"</p>");
                    }else if($(tempParagraph).parent().parent().prop("class") === 'flowchart'){
                        $(tempParagraph).append("<p class='finalLink secondLevel'>"+ finalParagraph +"</p>");
                    }else{
                        $(tempParagraph).append("<p class='finalLink thirstLevel'>"+ finalParagraph +"</p>");
                    }
                }else // IT WILL HAVE FOLDED MENU ICON IF THERE IS CHILDS
                {
                    $(tempParagraph).text('');
                    if(collapseOption =="collapse"){
                        $(tempParagraph).append("<div class='menuBox'><span class='notclicked'></span></div><p>"+ finalParagraph +"</p>");
                    }else{
                        $(tempParagraph).append("<div class='unfoldArrow'></div><p>"+ finalParagraph +"</p>");
                    }
                }
            };
            
            // WITH THE NEXT CLASSES WE WILL ADD A LINE AT LEFT SIDE IN CASE THERE IS MORE SECTIONS IN THE SAME LEVEL
            var list = tempFlowchart.getElementsByTagName('ul');
            for(var i = 0; i < list.length; i++){
                var temp = list[i];
                if($(temp).next('li').text() != ''){
                    // LONGER WILL ADD THE LINE
                   $(temp).addClass('longer');
                }else{
                    // SHORT WON'T ADD THE LINE
                    $(temp).addClass('short');
                }
            }
            
                // CREATE A NEW DIV WITH A CLASS CALLED "FLOWCHART"
            $(tempFlowchart).before("<div class='flowchart flowchartSerial_" + (m+1) + "'></div>");
                // SAVE THE CONTENT OF OUR NEW DIV
            var flowChartDiv = $('div.flowchartSerial_'+ (m+1));
            $(flowChartDiv).append($(tempFlowchart));
            
            // IF 'COLLAPSE' WAS WRITTEN AT THE BEGINNIG OF THE FLOWCHART, IT WILL BE COLLAPSED
            if(collapseOption == "collapse"){
                $(flowChartDiv).children('ul').children('ul').addClass('opened');
                $(flowChartDiv).children('ul').children('ul').slideToggle(350);
                $(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("clicked");
                $(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("notclicked");
                flowchartSlideTest(flowChartDiv);
            // OTHERWISE, IT WILL BE NO COLLAPSED
            }else{
                // THE CLASSES LONGER AND SHORT HAVE A DISPLAY:NONE PROPERTY
                // SO THIS WILL OVERWRITE THAT PROPERTIES AND WILL EXPAND ALL
                $(flowChartDiv).find('.longer').show();
                $(flowChartDiv).find('.short').show();
            }
        }
    }
    
    // right there
    $('ul.longer .menuBox').trigger("click");
});

function flowchartSlideTest(variable){

$(variable).find('.menuBox').click(function(event){
    var div = $(this).parent('li').next('ul');
    
    if($(div).html() != undefined){
        var open = $(variable).children('ul').children('ul').find('.opened');
        // IF WE OPENED ANOTHER SECTION BEFORE, IT WILL BE CLOSED BEFORE OPENING THE NEW ONE
        if($(open).html() != $(div).html()){
            if(!$(this).parent().parent().hasClass('opened')){
                $(open).each(function() {
                $(this).toggleClass("opened");
                $(this).slideToggle(350);
                $(this).prev('li').children().children().toggleClass("clicked");
                $(this).prev('li').children().children().toggleClass("notclicked");
            });
            }
        }
        
        $(div).each(function(i) {
            $(div).slideToggle(350);
            $(div).toggleClass("opened");
        });
        
        $(this).children().toggleClass("clicked");
        $(this).children().toggleClass("notclicked");
    };

$(variable).children('ul').children('ul').removeClass('opened');
});
};

.flowchart{width: 500px;margin:0 auto 15px;}
.flowchart .longer{
/*  border-left:1px solid #C5C5C5; */
    padding-left: 15%;
    margin-left: -15px /*!important*/;
    display:none;
}
.flowchart .short{
    padding-left: 15%;
    margin-left: -15px /*!important*/;
    display:none;
}
.flowchart p, .flowchart a, .flowchart li, .flowchart span{color:#fff !important;*color:#000;text-align:left;text-decoration: none;text-decoration: none !important;border-bottom:none !important;}
.flowchart ul{list-style:none;margin: 0;padding: 0;}
.flowchart ul li{margin-top: 10px;}
.flowchart ul li p{margin:0;padding: 5px;padding-left: 30px;background: #f47321;}
.flowchart ul li ul li p{background: #A8B2BB;}
.flowchart ul ul{margin-left: 70px;}
.flowchart ul ul li{
    border-left:1px solid #C5C5C5;
    margin: 0 0 0 -15px;
    padding: 8px 0 0 15px;
}
.flowchart ul ul li:after{
    content: "-";
    color: #fff;
    float: left;
    margin-left: -16px;
    margin-top: -21px;
    border-left: 1px solid #C5C5C5;
    border-bottom: 1px solid #C5C5C5;
    padding-right: 10px;
}
.flowchart ul ul li p{background:#7686c2;}
.flowchart ul ul ul{margin-left: 15%;}
.flowchart .short ul ul ul ul ul ul ul ul, .flowchart .longer ul ul ul ul ul ul ul ul{padding-left: 40px;}

/** COMPARE LATER WITH MENUBOX OF SIDENAV **/
.flowchart .menuBox{
cursor: pointer;
width: 18px;
float: left;
height: 22px;
margin-left: 6px; /* IE8 and below */
margin-top:3px;
}
.flowchart .unfoldArrow{
    width: 18px;
    float: left;
    height: 22px;
    margin-left: 6px;
    background: url(/images/sidebarMenu/downMenu-arrow-white.gif) no-repeat 9px 4px;
}
.flowchart .finalLink{
background-image: url(/images/sidebarMenu/menu-arrow-white.gif);
background-repeat: no-repeat;
background-position:9px 4px;
}
.flowchart .firstLevel{
background-color:#f47321;
}
.flowchart .secondLevel{
background-color:#7686c2;
}
.flowchart .thirstLevel{
background-color:#98a2d2;
}
.flowchart span {
margin-top: -2px;
display: list-item;
-webkit-box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
    
background:url(/images/sidebarMenu/menu_icon_for_IE.gif) no-repeat; /* IE8 and below */
margin-top: 3px; /* IE8 and below */
height:16px; /* IE8 and below */
}
.flowchart .clicked{
    margin-left: 9px;
    width: 1px;
    -webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    
    margin-left: 8px; /* IE8 and below */
    width: 4px; /* IE8 and below */
}
.flowchart .notclicked{
    width: 16px;
    -webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    
    width:20px; /* IE8 and below */
    height:16px; /* IE8 and below */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="flowchart">
<li>*collapse*Element 01 (level 01)</li>
<ul>
<li>Child 01 of Element 01 (level 02)</li>
</ul>
<li>Element 02 (level 01)</li>
<ul>
<li>Child 01 of Element 02 (level 02)</li>
<ul>
<li>Child of Element 02 (level 03)</li>
<ul>
<li>Child of Element 02 (level 04)</li>
</ul>
</ul>
<li>Child 02 of Element 02 (level 02)</li>
</ul>
<li>Element 03 (level 01)</li>
</ul>