title: Making a div clickable and a javascript to run some different link
body: <p>i have following code for my menu on page</p>
  
  <pre><code>&lt;td width="200" valign="top" align="left" bgcolor="#ffffff"&gt;
      &lt;div id="stemenu"&gt;
          &lt;div id="mbuttonon"&gt;
              &lt;a class="mwink" href="index.html"&gt;Home&lt;/a&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;a class="mwink" href="index.html"&gt;About us&lt;/a&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;a class="mwink" href="index.html"&gt;FAQs&lt;/a&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;div id="plus"&gt;
                  &lt;a href="javascript:animatedcollapse.toggle('aa')"&gt;&lt;img src="images/plus.gif"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;a class="mwink" href="index.html"&gt;Conditions we treat&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="aa" style="width: 160px; display:none;"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a class="mlink" href="#"&gt;MSK&lt;/a&gt;
                      &lt;li&gt;
                          &lt;a class="mlink" href="#"&gt;Neurological&lt;/a&gt;
                          &lt;li&gt;
                              &lt;a class="mlink" href="#"&gt;Paediatrics&lt;/a&gt;
                              &lt;li&gt;
                                  &lt;a class="mlink" href="#"&gt;Surgery&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;a class="mwink" href="index.html"&gt;Our clinics&lt;/a&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;div id="plus"&gt;
                  &lt;a href="javascript:animatedcollapse.toggle('ab')"&gt;&lt;img src="images/plus.gif"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;a class="mwink" href="index.html"&gt;Services&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="ab" style="width: 160px; display:none;"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a class="mlink" href="#"&gt;Clinic Appointments&lt;/a&gt;
                      &lt;li&gt;
                          &lt;a class="mlink" href="#"&gt;Gym rehabilitation&lt;/a&gt;
                          &lt;li&gt;
                              &lt;a class="mlink" href="#"&gt;Home visits&lt;/a&gt;
                              &lt;li&gt;
                                  &lt;a class="mlink" href="#"&gt;Hydrotherapy&lt;/a&gt;
                                  &lt;li&gt;
                                      &lt;a class="mlink" href="#"&gt;Musculoskeletal physiotherapy&lt;/a&gt;
                                      &lt;li&gt;
                                          &lt;a class="mlink" href="#"&gt;Neurological physiotherapy&lt;/a&gt;
                                          &lt;li&gt;
                                              &lt;a class="mlink" href="#"&gt;Paediatric physiotherapy&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;div id="plus"&gt;
                  &lt;a href="javascript:animatedcollapse.toggle('ac')"&gt;&lt;img src="images/plus.gif"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;a class="mwink" href="index.html"&gt;Treatments&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="ac" style="width: 160px; display:none;"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a class="mlink" href="#"&gt;Acupuncture&lt;/a&gt;
                      &lt;li&gt;
                          &lt;a class="mlink" href="#"&gt;Electrotherapy&lt;/a&gt;
                          &lt;li&gt;
                              &lt;a class="mlink" href="#"&gt;Gait Ax&lt;/a&gt;
                              &lt;li&gt;
                                  &lt;a class="mlink" href="#"&gt;Hydrotherapy&lt;/a&gt;
                                  &lt;li&gt;
                                      &lt;a class="mlink" href="#"&gt;Manipulation&lt;/a&gt;
                                      &lt;li&gt;
                                          &lt;a class="mlink" href="#"&gt;Massage&lt;/a&gt;
                                          &lt;li&gt;
                                              &lt;a class="mlink" href="#"&gt;Neurological rehabilitation&lt;/a&gt;
                                              &lt;li&gt;
                                                  &lt;a class="mlink" href="#"&gt;Orthotics&lt;/a&gt;
                                                  &lt;li&gt;
                                                      &lt;a class="mlink" href="#"&gt;Paediatric physio&lt;/a&gt;
                                                      &lt;li&gt;
                                                          &lt;a class="mlink" href="#"&gt;Pain management&lt;/a&gt;
                                                          &lt;li&gt;
                                                              &lt;a class="mlink" href="#"&gt;Physiotherapy&lt;/a&gt;
                                                              &lt;li&gt;
                                                                  &lt;a class="mlink" href="#"&gt;Respiratory treatment&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="6"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id="mbutton"&gt;
              &lt;a class="mwink" href="index.html"&gt;Contact us&lt;/a&gt;
          &lt;/div&gt;
          &lt;table cellspacing="0" cellpadding="0" width="100%" align="center"&gt;
              &lt;tr&gt;
                  &lt;td width="100%" height="0"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>clicking on PLUS button opens sub menu, </p>
  
  <p>my issue is, How can I make complete div an anchor link ( clicking on any part of mbutton div, it should follow the link) WHILE clicking on PLUS button, it should open the sub menu..</p>
  
  <p>Basically, I want to make all the part clickable, not only the text (e.g Home, About us), while plus button should open sub menu too...</p>
  
  <p>Can somebody guide me? for the moment, either I can make only anchor text clickable or I lose javascript sub menu opening...</p>
  
  <p>Can I do it in CSS??</p>