Question

i have following code for my menu on page

<td width="200" valign="top" align="left" bgcolor="#ffffff">
    <div id="stemenu">
        <div id="mbuttonon">
            <a class="mwink" href="index.html">Home</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">About us</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">FAQs</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('aa')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Conditions we treat</a>
        </div>
        <div id="aa" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">MSK</a>
                    <li>
                        <a class="mlink" href="#">Neurological</a>
                        <li>
                            <a class="mlink" href="#">Paediatrics</a>
                            <li>
                                <a class="mlink" href="#">Surgery</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">Our clinics</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('ab')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Services</a>
        </div>
        <div id="ab" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">Clinic Appointments</a>
                    <li>
                        <a class="mlink" href="#">Gym rehabilitation</a>
                        <li>
                            <a class="mlink" href="#">Home visits</a>
                            <li>
                                <a class="mlink" href="#">Hydrotherapy</a>
                                <li>
                                    <a class="mlink" href="#">Musculoskeletal physiotherapy</a>
                                    <li>
                                        <a class="mlink" href="#">Neurological physiotherapy</a>
                                        <li>
                                            <a class="mlink" href="#">Paediatric physiotherapy</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('ac')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Treatments</a>
        </div>
        <div id="ac" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">Acupuncture</a>
                    <li>
                        <a class="mlink" href="#">Electrotherapy</a>
                        <li>
                            <a class="mlink" href="#">Gait Ax</a>
                            <li>
                                <a class="mlink" href="#">Hydrotherapy</a>
                                <li>
                                    <a class="mlink" href="#">Manipulation</a>
                                    <li>
                                        <a class="mlink" href="#">Massage</a>
                                        <li>
                                            <a class="mlink" href="#">Neurological rehabilitation</a>
                                            <li>
                                                <a class="mlink" href="#">Orthotics</a>
                                                <li>
                                                    <a class="mlink" href="#">Paediatric physio</a>
                                                    <li>
                                                        <a class="mlink" href="#">Pain management</a>
                                                        <li>
                                                            <a class="mlink" href="#">Physiotherapy</a>
                                                            <li>
                                                                <a class="mlink" href="#">Respiratory treatment</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">Contact us</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="0"></td>
            </tr>
        </table>
    </div>
    <br>
    <br>
</td>

clicking on PLUS button opens sub menu,

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..

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…

Can somebody guide me? for the moment, either I can make only anchor text clickable or I lose javascript sub menu opening…

Can I do it in CSS??

Answer 1

Firstly, You have put same ids for more than one element, thats wrong. Assign uniqpe Id name for each element.
Try this :

<td width="200" valign="top" align="left" bgcolor="#ffffff">
 <div id="stemenu">
 <div id="mbuttonon"><a class="mwink" href="index.html">Home</a></div>

<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">About us</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">FAQs</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><div id="plus"  class='plus'><a href="#"><img src="images/plus.gif">   </a></div> <a class="mwink" href="index.html">Conditions we treat</a></div> 
<div id="aa" style="width: 160px; display:none;">
<ul><li><a class="mlink" href="#">MSK</a>
<li><a class="mlink" href="#">Neurological</a>
<li><a class="mlink" href="#">Paediatrics</a>
<li><a class="mlink" href="#">Surgery</a>
</ul></div>

<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">Our clinics</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><div id="plus" class='plus'><a href="#"><img src="images/plus.gif">    </a></div> <a class="mwink" href="index.html">Services</a></div> 
<div id="ab" style="width: 160px; display:none;">
<ul>
 <li><a class="mlink" href="#">Clinic Appointments</a>
 <li><a class="mlink" href="#">Gym rehabilitation</a>
 <li><a class="mlink" href="#">Home visits</a>
 <li><a class="mlink" href="#">Hydrotherapy</a>
 <li><a class="mlink" href="#">Musculoskeletal physiotherapy</a>
 <li><a class="mlink" href="#">Neurological physiotherapy</a>
 <li><a class="mlink" href="#">Paediatric physiotherapy</a>
 </ul></div>

 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td  width="100%" height="6"></td></tr></table>

 <div id="mbutton"><div id="plus"  class='plus'><a href="#"><img src="images/plus.gif"></a></div> <a class="mwink" href="index.html">Treatments</a></div> 
 <div id="ac" style="width: 160px; display:none;">
 <ul>
 <li><a class="mlink" href="#">Acupuncture</a>
 <li><a class="mlink" href="#">Electrotherapy</a>
 <li><a class="mlink" href="#">Gait Ax</a>
 <li><a class="mlink" href="#">Hydrotherapy</a>
 <li><a class="mlink" href="#">Manipulation</a>
 <li><a class="mlink" href="#">Massage</a>
 <li><a class="mlink" href="#">Neurological rehabilitation</a>
 <li><a class="mlink" href="#">Orthotics</a>
 <li><a class="mlink" href="#">Paediatric physio</a>
 <li><a class="mlink" href="#">Pain management</a>
 <li><a class="mlink" href="#">Physiotherapy</a>
 <li><a class="mlink" href="#">Respiratory treatment</a>
 </ul></div>

 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>

 <div id="mbutton"><a class="mwink" href="index.html">Contact us</a></div>
 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="0"></td></tr></table>

 </div>

 <br><br>

 </td>​

Javascript :

 jQuery(".plus").click(function(){
      jQuery(this).parent('div').next('div').slideToggle();
 });​

I have assigned a common class ‘plus ‘ to all divs which contains plus image, so that you don’t need to writ code for each menu.

Here is the Demo.