Image swap with a javascript onclick dropdown menu
- by AzzyDude
So I've got this code that has an image and when you click it a dropdown menu appears. Pretty simple. The code works fine but I'm trying to incorporate an image swap on click and I'm having difficulty. Here's the HTML and the JS (there's some CSS too, but I'll leave that out):
HTML:
<div id="header">
<dl class="dropdown">
<dt><a href="#"><img src="images/cogwheel_btn.png"/></a></dt>
<dd>
<ul>
<li><a href="#">Favorites</a></li>
<li><a href="#">History</a></li>
</ul>
</dd>
</dl>
</div>
JS:
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});?
I've tried adding lines like ("dt").empty(); and then ("dt").html("new_image") but it causes the dropdown functionality to stop working. Anyone any ideas?
