Mani M Mani M - 7 months ago 9
Javascript Question

how to show div on under button on onclick event

From this code i have three button ,now i cliked ** Reply button 1** means i want to show one textarea for bottom of the button( Reply button 1).else i have to select Reply button 2 means i want show the textarea for under this Reply button 2..i don't know how to do.i am new developer please help me some one



<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<a href="javascript:void(0)" rel="<?php echo $com['id']//1?>" class="reply-btn"><i class="fa fa-reply"></i> Reply button 1</a>
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>


<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<a href="javascript:void(0)" rel="<?php echo $com['id']//2?>" class="reply-btn"><i class="fa fa-reply"></i> Reply button 2</a>
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>


<div class="comment">
<div class="img-thumbnail">
<img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong>Kani</strong>
<span class="pull-right">
<a href="javascript:void(0)" rel="<?php echo $com['id']//3?>" class="reply-btn"><i class="fa fa-reply"></i> Reply button 3</a>
</span>
</span>
<p>Lorem ipsum dolor sit amet,</p>
<span class="date pull-right">19-Apr-2016 </span>
</div>
</div>





After click that button i want to show this



<textarea class="the-new-com"></textarea>




Answer

Now this should help you surely. You need not use seperate ids for each

JS

$('.reply-btn').on('click',function() {
  $(this).closest('.comment').next('.reply').html("<div><textarea class='the-new-com'></textarea></div>");
})

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="comment">
  <div class="img-thumbnail">
    <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
  </div>
  <div class="comment-block">
    <div class="comment-arrow"></div>
    <span class="comment-by">
      <strong>Kani</strong>
      <span class="pull-right">
       <a href="javascript:void(0)" rel="<?php echo $com['id']//1?>" id="reply-btn-1" class="reply-btn"><i class="fa fa-reply"></i> Reply button 1</a>
      </span>
    </span>
    <p>Lorem ipsum dolor sit amet,</p>
    <span class="date pull-right">19-Apr-2016 </span>
  </div>

</div>
<div class="reply"></div>


<div class="comment">
  <div class="img-thumbnail">
    <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
  </div>
  <div class="comment-block">
    <div class="comment-arrow"></div>
    <span class="comment-by">
      <strong>Kani</strong>
      <span class="pull-right">
       <a href="javascript:void(0)" rel="<?php echo $com['id']//2?>"id="reply-btn-2" class="reply-btn"><i class="fa fa-reply"></i> Reply button 2</a>
      </span>
    </span>
    <p>Lorem ipsum dolor sit amet,</p>
    <span class="date pull-right">19-Apr-2016 </span>
  </div>

</div>
<div class="reply"></div>

<div class="comment">
  <div class="img-thumbnail">
    <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
  </div>
  <div class="comment-block">
    <div class="comment-arrow"></div>
    <span class="comment-by">
      <strong>Kani</strong>
      <span class="pull-right">
       <a href="javascript:void(0)" rel="<?php echo $com['id']//3?>" id="reply-btn-3" class="reply-btn"><i class="fa fa-reply"></i> Reply button 3</a>
      </span>
    </span>
    <p>Lorem ipsum dolor sit amet,</p>
    <span class="date pull-right">19-Apr-2016 </span>
  </div>

</div>
<div class="reply"></div>
Comments