function action(m) { content = document.getElementById(m.id + '_content'); with (content.style) { display = display == 'none' ? '' : 'none'; } }
<script type="text/javascript" src="li.js"> </script> <ul> <li type=square> <span id="m1" οnclick="action(this);">Core Java</span> </li> <ul id="m1_content" style="display: none" type=square> <li> <a href="javascript:;">Language</a> </li> <li> <a href="javascript:;">IO</a> </li> <li> <a href="javascript:;">Thread</a> </li> </ul> <li type=circle> <span id="m2" οnclick="action(this);">Web Client</span> </li> <ul id="m2_content" style="display: none"> <li> <a href="javascript:;">JavaScript</a> </li> <li> <a href="javascript:;">HTML</a> </li> <li> <a href="javascript:;">CSS</a> </li> </ul> <li> <span id="m3" οnclick="action(this);">Web Server</span> </li> <ul id="m3_content" style="display: none"> <li> <a href="javascript:;">JDBC</a> </li> <li> <a href="javascript:;">Servlet/JSP</a> </li> <li> <a href="javascript:;">Web Service</a> </li> <li type="square"> <span id="m31" οnclick="action(this);">Framewroks</span> </li> <ul id="m31_content" style="display: none"> <li> <a href="javascript:;">Struts</a> </li> <li> <a href="javascript:;">Hibernate</a> </li> <li> <a href="javascript:;">Spring</a> </li> </ul> </ul> </ul>
<script type="text/javascript" src="li.js"> </script> <ul> <li type=square> <span id="m1" οnclick="action(this);">Core Java</span> </li> <ul id="m1_content" style="display: none" type=square> <li> <a href="javascript:;">Language</a> </li> <li> <a href="javascript:;">IO</a> </li> <li> <a href="javascript:;">Thread</a> </li> </ul> <li type=circle> <span id="m2" οnclick="action(this);">Web Client</span> </li> <ul id="m2_content" style="display: none"> <li> <a href="javascript:;">JavaScript</a> </li> <li> <a href="javascript:;">HTML</a> </li> <li> <a href="javascript:;">CSS</a> </li> </ul> <li> <span id="m3" οnclick="action(this);">Web Server</span> </li> <ul id="m3_content" style="display: none"> <li> <a href="javascript:;">JDBC</a> </li> <li> <a href="javascript:;">Servlet/JSP</a> </li> <li> <a href="javascript:;">Web Service</a> </li> <li type="square"> <span id="m31" οnclick="action(this);">Framewroks</span> </li> <ul id="m31_content" style="display: none"> <li> <a href="javascript:;">Struts</a> </li> <li> <a href="javascript:;">Hibernate</a> </li> <li> <a href="javascript:;">Spring</a> </li> </ul> </ul> </ul>