Zaffar Saffee
Reputation: 6305
Making a div clickable and a javascript to run some different link
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??
Upvotes: 1
Views: 503
Answers (3)
KoU_warch
Reputation: 2150
You need to use JavaScript for this kind of behavior. You might rather use javascript click events or use a ease your life library like jQuery
Taked from user 999 you could:
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Using jQuery:
<div id="target">
Click here
</div>
<script>
$(function(){
$("#target").click(function() {
alert("Handler for .click() called.");
});
});
</script>
Update Using your code sample, and using jQuery we can do something like
<!-- import jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<!-- JavaScript code for clicking the menu -->
<script>
$(function(){
$("#mbutton").click(function() {
window.location="http://google.com";
});
});
</script>
<div id="mbutton" style="cursor:pointer">
<a class="mwink" href="index.html">About us</a>
</div>
hope you understand it better.
Upvotes: 1
Nishu Tayal
Reputation: 20860
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.
Upvotes: 2
Related Questions
- How to make a DIV tag clickable with a hyperlink
- Clickable div that redirect me to another HTML page
- Open links in a specific DIV
- how to make a div clickable in order to open a link?
- Make a div clickable
- Clicking a link display it in Different Div on Same Page
- Make div in div clickable with Javascript
- change div by clicking on same link
- Making div a clickable link
- How can I execute JavaScript onClick of a NON-LINK?