javascript - ブートストラップの折りたたみ要素

Question

<div >
 <div>
  <h3 style="display:inline-block;">Comments</h3>
  <button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
 </div>
 <div id="comments" class="collapse in">
  <textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
  <button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
 </div>
</div>

これが私のコードです。ブートストラップの折りたたみ可能な要素があり、ページ内で折りたたみを開始しようとしていますが、できない複数の異なる方法を試しています。hide()や collapseなどの jQuery コマンドをいくつか使用しましたが、どれも機能していないようです。これを機能させる方法についてのアイデアはありますか?