change onclick function from a href to div
<p>trying to change this script which was posted here so i can scrap my rubbish attempt of jquering but i need the scrpit to react to click a div id or class??/ rather then a href link ---- UPDATED WITH ALL CODE AS USING .class or #id doesnt work --------</p>

<pre><code>   &lt;div class="top_menu_menub"&gt;
      &lt;ul id="menu"&gt;
      &lt;li class="sub"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Control Center&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;APEC Trinity&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;APEC Living&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;APEC Energy&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    $(function(){
  $(document).ready(function () {
    $('a.menu_button').click(function (e) {
      e.preventDefault();
      var $this = $(this);
      var ulId = $this.attr("href");
      var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length &gt; 0;
      var visible_uls = $this.parent().find("ul").filter(':visible');
      if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
        $ul = $this.parent().find("ul" + ulId);
        $ul.slideToggle('medium');
      }
      else { //close open menus (should only be one open) then open clicked menu
             //via callback 
        $this.parent().find("ul").filter(':visible').slideUp("medium", function() {
          $ul = $this.parent().find("ul" + ulId);
          //open clicked menu - unless menu was already open when clicked
          if (!clicked_menu_is_visible) $ul.slideToggle('medium');   
        });
      }  
    });
  });
    });

.top_menu_menub {
    padding: 3px 0px 0px 0px;
    width: 200px;
    float: left;
    height: 20px;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #aaa;
    background-image: url(../images/apecbuttona.jpg); background-repeat: no-repeat; background-position: 8px 4px;
    cursor: pointer;}
#menu {list-style-type:none; width:200px; padding:0; margin:0 auto; height: 24px;}
#menu ul {list-style-type:none; padding:0; margin:0; border: solid 1px #eee; border-radius: 5px; }
#menu li {float:left; margin:1px 1px 0 0;position:relative; z-index: 9999}
#menu li.sub {width: 200px; height: 16px; padding: 1px 0px 0px 0px;}
#menu li.sub:hover { color:#00CCFF; background-image: url(../images/apecbutton.jpg); background-repeat: no-repeat;background-position: 8px 0px; height: 24px;}
#menu li a {display:block; color:#999; font-family:arial, sans-serif; font-size:11px; line-height:23px; width:107px; text-decoration:none; text-align:left; cursor:pointer; font-weight:100; border-bottom: 1px solid #eee; padding-left: 8px;}
#menu li a:hover {background:#fff; color:#4FA4F9;}
#menu ul {position:absolute;left:-9800px;width:115px; }
#menu li.click {}
#menu li.click ul{left: 12px; top:22px; background: #fff; } /* the background image is for IE7 */
</code></pre>
