I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% opacity and only the first question is highlighted at 100%. However, when I move on to the next question, it remains at 20% opacity until I click on it or its corresponding input field. How can I ensure that the field or list element becomes active and displays at 100% opacity? Here's what I have implemented so far:
<ul>
<li class="main" id="first-element" role="tab" data-toggle="tab">
<div class="question">This is my first question</div>
<input type="text" placeholder="First Answer">
</li>
<li class="main" role="tab" data-toggle="tab">
<div class="question">Second Question</div>
<input type="text" placeholder="Second Answer">
</li>
<li class="main" role="tab" data-toggle="tab">
<div class="question">Third Question</div>
<input type="text" placeholder="Third Answer">
</li>
</ul>
<script>
$(document).ready(function() {
$('li.main').fadeTo(1000, 0.2);
$('li#first-element').fadeTo(1000, 1.0);
});
$('li.main').click(function() {
// Make all list elements (except this) transparent
$('li.main').not(this).stop().animate({
opacity: 0.2
});
// Make this opaque
$(this).stop().animate({
opacity: 1.0
});
});
</script>
Thanks to your guidance, here is the working solution on JSFiddle: https://jsfiddle.net/urfwap4n/