css - Making a div clickable and a javascript to run some different link -
i have following code 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 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 make complete div anchor link ( clicking on part of mbutton div, should follow link) while clicking on plus button, should open sub menu..
basically, want make part clickable, not text (e.g home, us), while plus button should open sub menu too...
can guide me? moment, either can make anchor text clickable or lose javascript sub menu opening...
can in css??
firstly, have put same ids more 1 element, thats wrong. assign uniqpe id name each element.
try :
<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 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 common class 'plus ' divs contains plus image, don't need writ code each menu.
here demo.
Comments
Post a Comment