Answered Quip Threaded Comment Reply Form on same page

[[+successMsg:eq=``:then=``:else=`

<div style="position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(255,255,255,.5);z-index:9000;">

<div style="width:50%;margin:10% auto 0 auto;"><h1>[[+successMsg]]</h1><p><a href="[[+url]]">Head back to the thread</a></p></div>

</div>
`]]

<form style="padding-top:1.8em;" id="quip-add-comment-[[+idprefix]][[+parent]]" action="[[+url]]#quip-comment-preview-box-[[+idprefix]]" method="post" class="comment_form">
<div class="quip-comment quip-add-comment">
    <input type="hidden" name="nospam" value="" />
    <input type="hidden" name="thread" value="[[+thread]]" />
    <input type="hidden" name="parent" value="[[+parent]]" />
    <input type="hidden" name="auth_nonce" value="[[+auth_nonce]]" />
    <input type="hidden" name="preview_mode" value="[[+preview_mode]]" />

    <div class="quip-fld">
	 	<p class="quip-error">[[+error.name]]</p>
        <label for="quip-comment-name-[[+idprefix]]">[[%quip.name? &namespace=`quip` &topic=`default`]]:</label>
        <input type="text" name="name" id="quip-comment-name-[[+idprefix]]" class="required" value="" placeholder="Name" />
		<span style="color:red;position:absolute;padding:1em;z-index:6;top:0;right:0;">*</span>
    </div>
    
    <div class="quip-fld">
		<p class="quip-error">[[+error.email]]</p>
        <label for="quip-comment-email-[[+idprefix]]">[[%quip.email]]:</label>
        <input type="text" name="email" id="quip-comment-email-[[+idprefix]]" class="required email" value="" placeholder="Email" />
		<span style="color:red;position:absolute;padding:1em;z-index:6;top:0;right:0;">*</span>
    </div>
    
    <div class="quip-fld">
		<p class="quip-error">[[+error.website]]</p>
        <label for="quip-comment-website-[[+idprefix]]">[[%quip.website]]:</label>
        <input type="text" name="website" id="quip-comment-website-[[+idprefix]]" class="url" value="" placeholder="Website" />
    </div>

    <div class="quip-fld">
        [[+unsubscribe:default=`
		<p class="quip-error">[[+error.notify]]</p>
        <input type="checkbox" value="1" name="notify" id="quip-comment-notify-[[+idprefix]]" [[+notifyChecked]] />
		<label for="quip-comment-notify-[[+idprefix]]">[[%quip.notify_me]]:</label>
        `]]
		Notify me of new replies
    </div>

    <div class="quip-fld recaptcha">
    [[+quip.recaptcha_html]]
    <span class="quip-error">[[+error.recaptcha]]</span>
    </div>
    
    
    <p><span class="quip-allowed-tags">[[%quip.allowed_tags? &tags=`[[++quip.allowed_tags:htmlent]]`]]</span><span class="quip-error">[[+error.comment]]</span></p>
	<div class="quip-fld">
    <textarea name="comment" id="quip-comment-box-[[+idprefix]]" placeholder="Comment" class="required" rows="5">[[+comment]]</textarea>
	<span style="color:red;position:absolute;padding:1em;z-index:6;top:0;right:0;">*</span>
	</div>
    
    [[+can_post:is=`1`:then=`<button type="submit" class="submit button_disabled" name="[[+post_action]]" value="1" disabled="disabled">[[%quip.post]]</button>`]]

    <br class="clear" />
</div>

<script>
$(document).ready(function() {
   $('#quip-add-comment-[[+idprefix]][[+parent]]').bind('change keyup', function() {
    if($(this).validate().checkForm()) {
        $('#quip-add-comment-[[+idprefix]][[+parent]] :submit').removeClass('button_disabled').attr('disabled', false);
    } else {
        $('#quip-add-comment-[[+idprefix]][[+parent]] :submit').addClass('button_disabled').attr('disabled', true);
    }
});
});
</script>
</form>

    <div class="quip-comment-options">
        
        
    </div>
    <div class="quip-break"></div>

	<script>
	new jQueryCollapse($("#49_comment_box"), {
          open: function() {
            this.slideDown(150);
          },
          close: function() {
            this.slideUp(150);
          }
        });
	</script>

	<div id="#49_comment_box" class="comment_box" data-collapse>

	<h2>Reply</h2>
		<div>

<li class="[[+cls]]" id="[[+idprefix]][[+id]]" [[+depth_margin:notempty=`style="padding-left: [[+depth_margin]]px"`]]>
<div id="[[+idprefix]][[+id]]-div" class="quip-comment-body [[+alt]]">

    <div class="gravatar">
        [[+gravatarUrl:notempty=`<img src="[[+gravatarUrl]]" class="quip-avatar" alt="[[+authorName:striptags]]" />`]]
    </div>

	<h2 style="padding-top:0;padding-bottom:1em;" class="quip-comment-author">[[+authorName]]</h2>

	<p><span class="posted_date">[[+createdon]]</span><br/>[[+body]]</p>

	<div [[+replyUrl:notempty=`style="margin-bottom:-25px;position:relative;z-index:500;width:50%;"`]] class="like_dislike">[[!LikeDislike? &tpl=`mini_likedislik` &name=`like_dislike[[+id]]` ]]</div>

    <div class="quip-comment-options">
        [[+report]]
        [[+options]]
    </div>
    <div class="quip-break"></div>

	<script>
	new jQueryCollapse($("#[[+id]]_comment_box"), {
          open: function() {
            this.slideDown(150);
          },
          close: function() {
            this.slideUp(150);
          }
        });
	</script>

	[[+replyUrl:notempty=`<div id="#[[+id]]_comment_box" class="comment_box" data-collapse>

	<h2>Reply</h2>
		<div>[[!QuipReply? &thread=`[[+thread]]` &tplAddComment=`quipAddCommentCustom2` &parent=`[[+id]]` &closeAfter=`0` ]]</div>
	</div>`]]
</div>
    [[+children:notempty=`<ol class="quip-comment-list">[[+children]]</ol>`]]
</li>

.comment_box > h2.close + div {
    display: block !important;
    max-height: 0;
    overflow: hidden;
}
* {
    transition: all 0.25s ease-in-out 0s;
}

[[+replyUrl:notempty=`<div id="#[[+id]]_comment_box"

new jQueryCollapse($("#[[+id]]_comment_box").. 

[[!Quip? &thread=`[[+thread]]` &threading=`1`]]
<br />
[[!QuipReply? &thread=`[[+thread]]` &tplAddComment=`quipAddCommentCustom` &parent=`[[+id]]` ]]

[[!Quip? &thread=`myBlog-[[*id]]` &threading=`1`]]
<br />
[[!QuipReply? &thread=`myBlog-[[*id]]` &tplAddComment=`quipAddCommentCustom` &parent=`[[+id]]` ]]