Общие вопросы по коду

EN130 · Конфигурация компьютера

Я написал такую заготовку:

HTML код:

<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тест</title>
 
<style> 
  ul {padding-left: 16px; margin-left:0px; list-style:none}
  li {padding-left: 0px; margin-left:0px;}
  img {border: 0;}
</style>
 
<!-- Начало скрипта смены иконки -->
<script> 
function openTree(id)
{
   var curent_element = document.getElementById("child"+id);
   var curent_image= document.getElementById("img"+id);
   if( !curent_element ) return false;
   if( curent_element.style.display == "none" 
       || curent_element.style.display == "" ) {
       curent_element.style.display = "block";
       curent_image.src='img/open.gif';
   }  
   else {
      curent_element.style.display = "none";
      curent_image.src='img/close.gif';
   }  
   return true;   
}
</script> 
<!-- Конец скрипта смены иконки -->
 
</head>
<body>
  <!-- Начало таблицы-каркаса-->
  <table class="main">   
   <tr>
     <td class="menu" style="width:200px">
       <!-- Начало блока меню -->
      <div>
      <ul>
      <div id="child1_1">
        <ul>
        <li>
        <a onclick="return !openTree('1_1_1');" href="">
        <img id="img1_1_1" src="img/close.gif" align="absmiddle">Раздел 1
        </a>
        </li>
 
        <div id="child1_1_1" style="display: none;">
          <ul>
            <li class="list">
            <a href="template.html">
            <img id="img1_1_1" src="img/list.gif" align="absmiddle">пункт 1
            </a>
            </li>
            <li class="list">
            <a href="index.html">
            <img id="img1_1_1" src="img/list.gif" align="absmiddle">пункт 2
            </a>
            </li>
            <li class="list">
            <a href="">
            <img id="img1_1_1" src="img/list.gif" align="absmiddle">и так далее
            </a>
            </li>
          </ul>
        </div>
 
        <li>
        <a onclick="return !openTree('1_2_1');" href="">
        <img id="img1_2_1" src="img/close.gif" align="absmiddle">Раздел 2
        </a>
        </li>
 
        <div id="child1_2_1" style="display: none;">
          <ul>
            <li class="list">
            <a href="">
            <img id="img1_2_1" src="img/list.gif" align="absmiddle">пункт 1        
            </a>
            </li>
            <li class="list">
            <a href="">
            <img id="img1_2_1" src="img/list.gif" align="absmiddle">пункт 2
            </a>
            </li>
            <li class="list">
            <a href="">
            <img id="img1_2_1" src="img/list.gif" align="absmiddle">и так далее
            </a>
            </li>

          </ul>
        </div>
 
       <li>
        <a onclick="return !openTree('1_3_1');" href="">
        <img id="img1_3_1" src="img/close.gif" align="absmiddle">раздел и так далеее
        </a>
        </li>
 
        <div id="child1_3_1" style="display: none;">
          <ul>
            <li class="list">
            <a href="">
            <img id="img1_3_1" src="img/list.gif" align="absmiddle">1
            </a>
            </li>
            <li class="list">
            <a href="">
            <img id="img1_3_1" src="img/list.gif" align="absmiddle">2
            </a>
            </li>
            <li class="list">
            <a href="">
            <img id="img1_3_1" src="img/list.gif" align="absmiddle">и так далее
            </a>
            </li>
          </ul>
        </div>
 
        </ul>
      </div>
      </ul>
      </div>
       <!-- Конец блока меню -->
     </td>  
   </tr>
  </table>
  <!-- Конец таблицы-каркаса -->
</body>
</html>

Помогите подключить это к основному коду через menu.js

По мере вдупления в код буду его оптимизировать.