Toggle CSS in multiple instances individually
Hi All,
Trying to get this to work individually with each individual instance on the page (usually 5-10 questions on each page). Right now it adds the class to every instance of the div that has the answerCorrect class. I need the link to only turn on the specific answer associated with it. Any help would be appreciated on how to get me there.
- <script type="text/javascript">
$(document).ready(function(){
$(".showAnswer").click(function(){
$(".theAnswer").toggleClass("answerCorrect");
$(this).text($(this).text() == 'Hide Answer' ? 'Show Answer' : 'Hide Answer');
});
});
</script>
HTML
- <ul>
<li>(A) 2 to 7</li>
<li>(B) 3 to 5</li>
<li class="theAnswer">(C) 6 to 7</li>
<li>(D) 7 to 2</li>
<li>(E) 7 to 5</li>
</ul>
<a href="#" class="showAnswer" >Show Answer</a>