My jQuery was working fine until I added some more divs to my HTML. I'm now trying to toggle the opening and closing of a discussion container named discussionContainer with a click on the button replyButton. Any assistance would be highly appreciated.
I plan to add an ng-click attribute to the replyButton soon, as I need to pass an ID for an HTTP request to retrieve data from my database. Is there a way to achieve this using AngularJS or any other suggestions besides jQuery? The discussionContainer should start out closed when the page loads.
$(document).on("click", ".replyButton", function() {
$(this).parent('.forQuestions').find(".discussionContainer").slideToggle(300);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="question">
<div class="forQuestion">
<div class="cardBody">
{{answer.aContent}}
</div>
<div class="cardFooter">
<div class="col-xs-4 footer1">
<button class="replyButton">Reply</button>
</div>
<div class="col-xs-4 footer2">
<i class="fa fa-trash" aria-hidden="true" ng-click="controller.deleteAnswer(answer._id)"></i>
<i class="fa fa-pencil" aria-hidden="true" ng-click="controller.showEditAnswerModal(answer)"></i>
</div>
<div class="col-xs-4 footer3">
{{answer.aDate | date: 'medium'}}
</div>
</div>
<div class="discussionContainer">
<ul>
<li>comment1</li>
<li>comment2</li>
</ul>
<div class="newComment">
<textarea rows="2" cols="30" placeholder="New comment"></textarea>
<button type="button" name="button">Comment</button>
</div>
</div>
</div>
</li>