CODEWITHSUNDEEP
jqueryhtmlcssangularjs
bemon
bemon

Reputation: 123

Open and Close Container (div)

I had my jQuery working earlier but I recently had to add a few more div's to my HTML. I am trying to open and close discussionContainer with a click on the button replyButton. Any help would be great.

I will be putting an ng-click on the replyButton here soon as I will be passing through and id for an http request to grab content from my db, could I do this in Angularjs instead? Maybe some other ideas/suggestions than jQuery and Angularjs? On page load the discussionContainer will be closed.

$(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>

Upvotes: 1

Views: 1343

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

The problem with your code is:

1-- .parent() only travels a single level up the DOM tree

2-- You have no element with class forQuestions your correct class is forQuestion without s on the end .. so you need to use .closest('.forQuestion')

Demo

$(document).on("click", ".replyButton", function() {
  $(this).closest('.forQuestion').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>

Upvotes: 1

Related Questions