title: Image swap with a javascript onclick dropdown menu
body: <p>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):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;dl class="dropdown"&gt;
      &lt;dt&gt;&lt;a href="#"&gt;&lt;img src="images/cogwheel_btn.png"/&gt;&lt;/a&gt;&lt;/dt&gt;
      &lt;dd&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Favorites&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
  $(".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();
  });
  });
  </code></pre>
  
  <p>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?</p>