javascript - How do I make an existing expand/collapse JS menu accessible by setting aria-expanded and aria-hidden attributes programmatically? -

javascript - How do I make an existing expand/collapse JS menu accessible by setting aria-expanded and aria-hidden attributes programmatically? -

i not proficient in js hoping can show me how create existing expand/collapse js menu accessible setting aria-expanded , aria-hidden attributes programmatically existing js. note: cannot edit menu's html. give thanks you.

// javascript document imgout=new image(9,9); imgin=new image(9,9); /////////////////begin user editable/////////////////////////////// imgout.src="images/u.gif"; imgin.src="images/d.gif"; ///////////////end user editable/////////////////////////////////// //this switches expand collapse icons function filter(imagename,objectsrc){ if (document.images){ document.images[imagename].src=eval(objectsrc+".src"); } } //show or hide funtion depends on if element shown or hidden function shoh(id) { if (document.getelementbyid) { // dom3 = ie5, ns6 if (document.getelementbyid(id).style.display == "none"){ document.getelementbyid(id).style.display = 'block'; filter(("img"+id),'imgin'); } else { filter(("img"+id),'imgout'); document.getelementbyid(id).style.display = 'none'; } } else { if (document.layers) { if (document.id.display == "none"){ document.id.display = 'block'; filter(("img"+id),'imgin'); } else { filter(("img"+id),'imgout'); document.id.display = 'none'; } } else { if (document.all.id.style.visibility == "none"){ document.all.id.style.display = 'block'; } else { filter(("img"+id),'imgout'); document.all.id.style.display = 'none'; } } } } <!-- html source --> <div class="box" > <div class="boxhead"> <h2><a href="index.php">first responders</a></h2> </div> <ul class="sidebarnav"> <li class="order"><a href="order.html">order free materials</a></li> <li class="safetyinfo"><a href="safety/index.html">advanced safety info</a> <ul> <li><a href="safety/overhead.html" class="overhead">overhead line safety</a></li> <li><a href="safety/downed.html" class="downed">downed powerfulness lines</a></li> <li><a href="safety/carpole.html" class="carpole">car/pole accidents</a></li> <li><a href="safety/substation.html" class="substation">substation fires</a></li> </ul> </li> <li class="training"><a href="presentation/index.html">presentation tools</a> </li> </ul> </div>

javascript accessibility