title: In my "FAQ" section, make <dt> look like an <a> with jquery
body: <p>My stylesheet has two definitions:</p>
  
  <pre><code>bodytext a { border-bottom-color: #9aa1ae; border-bottom-width: 1px; 
  border-bottom-style: solid; color: #00589f; }
  bodytext a:hover { border-bottom-color: #0d1117; border-bottom-width: 1px; 
  border-bottom-style: solid; color: #0d1117; }
  </code></pre>
  
  <p>and my page has an FAQ section, like so</p>
  
  <pre><code>&lt;dl class='faq'&gt;
    &lt;dt&gt;Question 1&lt;/dt&gt;
    &lt;dd&gt;Answer 1&lt;/dd&gt;
    &lt;dt&gt;Question 2&lt;/dd&gt;
    &lt;dd&gt;Answer 1&lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>I wrote a simple jquery to expand/contract the FAQ, as follows:</p>
  
  <pre><code>$('dl.faq dd').hide();
  $('dl.faq dt').click(function(){
    $(this).next().slideToggle();
  });
  </code></pre>
  
  <p>so that if javascript is off, the FAQ is still readable.</p>
  
  <p>However, right now, I'm worried that my readers aren't clicking the questions to expand them.  I'd like the <code>dt</code>s to look like <code>a</code>s so they look clickable, and preferably have the <code>a</code> and <code>a:hover</code> definitions appear only once in my stylesheet.  How do I do this in jquery?</p>