Currently facing an issue with toggling on my webpage. I have a series of yes and no questions, and based on the user's response, additional questions should appear. Everything was functioning properly until I needed to relocate some of these questions within a previously answered question.
This is a snippet of my HTML structure:
<div class="form-group">
<label for="authorCover">
Do you consider yourself amazing? (Optional)
</label>
<button class="btn btn-small btn-success coverBtn yesBtn">Yes</button>
<button class="btn btn-small btn-danger coverBtn noBtn">No</button>
<p class="clearix"></p>
<div class="answYes">
<label for="upload">
Please Upload your amazing here!
</label>
<input type="file" class="form-control" name="upload" value="" />
</div><!--.answYes-->
<div class="answNo">
<div class="form-group">
<label for="authorCover">
Are you awesome? (Optional)
</label>
<button class="btn btn-small btn-success coverBtn yesBtn">Yes</button>
<button class="btn btn-small btn-danger coverBtn noBtn">No</button>
<p class="clearix"></p>
<div class="answYes">
<label for="awesome">
Please Upload your awesomeness here
</label>
<input type="file" class="form-control" name="awesome" value="" />
</div><!--.answYes-->
<div class="answNo">no</div>
</div><!--.form-group-->
</div><!--.answNo-->
</div><!--.form-group-->
Here is how my jQuery code appears:
$('.yesBtn').on('click', function(){
$(this).parent().find('.answYes').toggle();
$(this).parent().find('.answNo').hide();
return false;
});
$('.noBtn').on('click', function(){
$(this).parent().find('.answNo').toggle();
$(this).parent().find('.answYes').hide();
return false;
});
If you'd like a clearer visualization, check out this jsFiddle http://jsfiddle.net/pusKM/
Your assistance on this matter would be greatly appreciated!