My HTML code needs to be updated to include a toggle span and JavaScript functionality. This will allow the child elements to be hidden and only displayed when the parent is clicked. I am a beginner with JavaScript and would appreciate any help in resolving this issue. Thank you!
<div class=" col-lg-4 col-md-9 col-sm-8" id="Permission">
<ul id="Div1" class="tree">
<li class="has">
<input type="checkbox" name="Dashboard" value="yes"> Dashboard
<ul> </ul>
</li>
</ul>
<ul id="Div2" class="tree">
<li class="has" "="">
<input type="checkbox" name="Master" value="yes"> Master
<ul>
<li>
<input type="checkbox" id="Upper1 name=" menus-accesscontrol[9]"="" value="9"> AccessControl
<ul id="Parent1">
<li>
<input type="checkbox" name="Menus-User[3]" value="3"> User
<ul class="childs">
<li><input type="checkbox" name="UserAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="UserAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="UserAllowView" value="0"> Allow View </li>
</ul>
</li>
...
...