Question

All. I have been working on this for some time and can’t seem to come up with a solution. I am working on a new FAQ for our intranet and I am using the jquery scrollTo plugin and the localScroll pluging to accomplish the feel of it. One thing I added was when a user clicks the link for the question, it scrolls the user down to the answer and highlights the fieldset in red to indicate the answer to their question.

My JS looks something like this:

function styleRow(myId) {
  ID = myId.substring(1) var ID = document.getElementById(ID)
  ID.className += " highlight"
}

My HTML looks like this:

<li><a href="#1_1" onclick="styleRow('#1_1')">Question 1<a></li>
<li><a href="#1_2" onclick="styleRow('#1_2')">Question 2</a></li>
<li><a href="#1_3" onclick="styleRow('#1_3')">Question 3</a></li>


<fieldset class="pad18" id="1_1">
<legend class="SubTitleSmall" id="1_1">Answer 1</legend>
     <p class="MT12 ML24">Answer 1 Text</a></p>
</fieldset> 

     <fieldset class="pad18" id="1_2">
<legend class="SubTitleSmall" id="1_2">Answer 2</legend>
<p class="MT12 ML24">Answer 2 Text</p>
</fieldset> 

<fieldset class="pad18" id="1_3">
<legend class="SubTitleSmall" id="1_3">Answer 3</legend>
     <p class="MT12 ML24">Answer 3 Text</p>
</fieldset>

Currently, when a user click a bookmark link the row highlights just fine. However, if they got back to the top and click another link, the styles aren’t clearing on the previously selected question. I know there is no code currently included for that, and that is why I am here.

Any help would be greatly appreciated!

Answer 1

If you use jQuery,

function styleRow(myId){
    $(".highlight").removeClass("highlight");
    $(myId).addClass("highlight");
}

But be aware that the id:

• Must begin with a letter: A-Z or a-z
• Can be followed by letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”)