I've been developing a website and encountered an issue. In my FAQ section, I have a drop-down menu along with a submit button that directs to different parts of the FAQ page. Everything seems to be working fine so far - the submit button triggers a javascript function that dynamically links to the relevant anchor on the page. However, I'd like the selected question in the dropdown menu to be highlighted orange. While I was able to achieve the highlight effect briefly, it disappears quickly after appearing. I'm unsure why this is happening and how I can make the highlight stay without flashing away. Additionally, I'm interested in making the highlight fade in using jQuery. I know that hiding the div then using .fade() can do the trick, but it results in all text disappearing. Any help or suggestions would be greatly appreciated!
Here's a link to a fiddle for reference: http://jsfiddle.net/UjPtv/. It doesn't work completely because when you submit, it displays an error. My assumption is that jsfiddle might not allow submits even though this submit simply runs some JavaScript code. If you have a workaround for this issue, please share it with me so I can update the link. Thank you!
Javascript:
var toggled = 0;
function jump_to (location) {
if(toggled == 0){
toggled = 1;
window.location.href = "#" + location;
$("#wrap"+location).toggleClass("wraps_active");
}
}
HTML:
<div id = "main">
<h2 class = "center">FACTS YOU NEED</h2>
<h3>The Core Facts You Want To Know</h3>
<div class = "border">
<p>
Jump To:
<form onsubmit = "jump_to(jump_list.value)">
<select name = "jump_list">
<option value="1">Who can go to the camp?</option>
<option value="2"><a href = "contact_information.html">When do we check in and out?</a></option>
</select>
<input type = "submit" value = "Go"/>
</form>
</p>
</div>
<div id = "wrap1" class = "wraps">
<h4><a name = "1"></a>Who can go to the camp? </h4>
<p>
The camp is for kids ages 9 to 17 years old who have been diagnosed with celiac disease, a condition that requires life-long adherence to a gluten-free diet. Given limited space, we are unable to accommodate kids on gluten-free diets for other reasons (such as autism spectrum disorders). Campers ages 16-17 years may choose to volunteer as junior counselors. Junior counselors assist the adult volunteers, and for first session junior counselors need to arrive a day early (on Monday) for the staff orientation and training. If there are more junior counselor applicants than there is available space, priority is given based on age, gender-need, and prior camp experience.
</p>
</div>
<div id = "wrap2" class = "wraps">
<h4><a name = "2"></a>When do we check in and out?</h4>
<p>
Check-in: Please see the "Calendar" on the left hand side of the website for details about each camp.Please do not arrive early.
</br><br/>
Check-out: All campers must be checked out by the stated time so camp can be prepared for the next group, see the "Calendar" for date information.
</p>
</div>
</div>
CSS:
.wraps{
border-bottom:1px dashed #C3C3C3;
}
.wraps_active{
border-bottom:1px dashed #C3C3C3;
background:#FFB280;
}