I have created a dropdown menu that I am going to put some questions in. I have also created some divs that contain the responses to the questions in the dropdown menu.
I want the answers to all be hidden when an option hasn't been selected. When an option is selected however I want only the answer to that question that has been selected to appear underneath the dropdown menu.
Any ideas as to how I can achieve this?
Here is my dropdown list & content:
<select name="questions" id="faq-questions">
<option>Questions</option>
<option value="1">Question 1</option>
<option value="2">Question 2</option>
<option value="3">Question 3</option>
<option value="4">Question 4</option>
</select>
<div class="answer-1" hidden>
<p>Answer 1 content</p>
</div>
<div class="answer-2" hidden>
<p>Answer 2 content</p>
</div>
<div class="answer-3" hidden>
<p>Answer 3 content</p>
</div>
<div class="answer-4" hidden>
<p>Answer 4 content</p>
</div>
<select name="questions" id="faq-questions">
<option>Questions</option>
<option id="option1" value="1">Question 1</option>
<option id="option2" value="2">Question 2</option>
<option id="option3" value="3">Question 3</option>
<option id="option4" value="4">Question 4</option>
</select>
<div class="answer-1" id="answer1" hidden>
<p>Answer 1 content</p>
</div>
<div class="answer-2" id="answer2" hidden>
<p>Answer 2 content</p>
</div>
<div class="answer-3" id="answer3" hidden>
<p>Answer 3 content</p>
</div>
<div class="answer-4" id="answer4" hidden>
<p>Answer 4 content</p>
</div>
Now that everything has a unique ID. You can trigger an .show() or .fadeIn() whenever a select button is selected.
Something like:
$('#option1').click(function(){
$('#answer1').fadeIn('slow');
});
Or something in that direction.
I would restructure your answer classes and add ids. Check out this fiddle: https://jsfiddle.net/c5o5f5d9/1/
By making all the answer divs have the same class, you can hide them all, and then only trigger the answer you want by the id. The id is a combination of the word answer and the number it refers to.
HTML:
<select name="questions" id="faq-questions">
<option>Questions</option>
<option value="1">Question 1</option>
<option value="2">Question 2</option>
<option value="3">Question 3</option>
<option value="4">Question 4</option>
</select>
<div class="answer hidden" id="answer1">
<p>Answer 1 content</p>
</div>
<div class="answer hidden" id="answer2">
<p>Answer 2 content</p>
</div>
<div class="answer hidden" id="answer3">
<p>Answer 3 content</p>
</div>
<div class="answer hidden" id="answer4">
<p>Answer 4 content</p>
</div>
CSS:
.hidden {
display: none;
}
JS:
$(document).ready(function(){
$('#faq-questions').on('change', function(){
var theVal = $(this).val();
$('.answer').addClass('hidden');
$('.answer#answer' + theVal).removeClass('hidden');
});
});
<select name="questions" id="faq-questions">
<option>Questions</option>
<option value="1">Question 1</option>
<option value="2">Question 2</option>
<option value="3">Question 3</option>
<option value="4">Question 4</option>
</select>
<div id="faq-answers">
<div class="answer-1" hidden>
<p>Answer 1 content</p>
</div>
<div class="answer-2" hidden>
<p>Answer 2 content</p>
</div>
<div class="answer-3" hidden>
<p>Answer 3 content</p>
</div>
<div class="answer-4" hidden>
<p>Answer 4 content</p>
</div>
</div>
<script>
$(function(){
$('#faq-questions').on('change',function(){
$('#faq-answers div').hide();
$('.answer-'+this.value).show();
});
});
</script>
Try something like this little code:
https://jsfiddle.net/r4fpz8j8/
$('#faq-questions').change(function(){
var question = $(this).val();
$('.answer').css({display: 'none'});
$('.answer-'+ question).css({display: 'block'});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.