Auto hide <ul> listing on load using jQuery - html

Question

How can I automatically show this listing collapsed without modifying the HTML structure? This means I want to collapse all the folders of the tree.
And initially, instead of showing this:
I want to this:
This is my try with no luck:
$('#master-ul').hide()
$('#master-ul').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul>
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
PS: There can be more than one root folder. This means that having more than one first_folder in the example.

Answer 1

Why don't use css then use jq for change that?
$('#master-ul').on('click', 'li', function() {
$('#secondlvl').slideToggle();
return false
});
$('.folder').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
#master-ul li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul id='secondlvl'>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul id="thirdlvl">
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
Edit:
Add #secondlvl for control the first slideToggle()
Additional:
If you don't want secondlvl id you can use $('#master-ul > li > ul').slideToggle(); instead of $('#secondlvl').slideToggle(); for slide the first ul.
$('#master-ul').on('click', 'li', function() {
$('#master-ul > li > ul').slideToggle();
return false
});
$('.folder').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
#master-ul li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul id="thirdlvl">
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>