In my "FAQ" section, make <dt> look like an <a> with jquery

Question

My stylesheet has two definitions:

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; }

and my page has an FAQ section, like so

<dl class='faq'>
  <dt>Question 1</dt>
  <dd>Answer 1</dd>
  <dt>Question 2</dd>
  <dd>Answer 1</dd>
</dl>

I wrote a simple jquery to expand/contract the FAQ, as follows:

$('dl.faq dd').hide();
$('dl.faq dt').click(function(){
  $(this).next().slideToggle();
});

so that if javascript is off, the FAQ is still readable.

However, right now, I'm worried that my readers aren't clicking the questions to expand them. I'd like the dts to look like as so they look clickable, and preferably have the a and a:hover definitions appear only once in my stylesheet. How do I do this in jquery?

Answer 1

Why don't you find where you define the a and change like so in the CSS

a,
dl.faq dt {
   color: blue;
   cursor: pointer;
}

You could also put a unique id on every answer, and actually use a link to it, for example

<dl class='faq'>
  <dt><a href="#question-1">Question 1</a></dt>
  <dd id="question-1">Answer 1</dd>
  <dt>Question 2</dd>
  <dd>Answer 1</dd>
</dl>

That way, you could also link people to individual questions / answers. It will also jump their browser viewport to the answer when clicked.

Answer 2

I changed my stylesheet to this:

bodytext a, .a-like { border-bottom-color: #9aa1ae; border-bottom-width: 1px; 
border-bottom-style: solid; color: #00589f; }
bodytext a:hover, .a-like:hover { border-bottom-color: #0d1117; border-bottom-width: 1px; 
border-bottom-style: solid; color: #0d1117; }

Since dt is a block-level tag and a is an inline tag, I changed my HTML so it won't look insane:

<dl class='faq'>
    <dt><span>Question 1</span></dt>
    <dd>Answer 1</dd>
    <dt><span>Question 2</span></dd>
    <dd>Answer 1</dd>
</dl>

Finally, I changed my javascript to this

$('dl.faq dd').hide();
$('dl.faq dt span').addClass('a-like');
$('dl.faq dt').css("cursor", "pointer");
$('dl.faq dt').click(function(){
  $(this).next().slideToggle();
  $(this).children(":first").toggleClass('a-like');
});

Thus, when javascript is off, it looks like a Definition list. When javascript is on, it looks like an interactive FAQ. Thanks, Alex, for throwing some ideas.