reply button

<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
   <span class="btn reply" id="replyb">Reply</span> 
</div>

input field

<div  class="col-lg-12" style="background:#eff9c7;">
    <input type="text"  id="reply" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>

so here what im trying to make is when i reload the page the input field should be hidden and when i click the reply button it will show.. and when i click it again it will hide.. i tried using toggle() on jquery it works but the problem is if i reload the page the button is visible which is not the right thing.. i even tried to use .show() and .hide() but it seems im missing something so it doesn't work on my end. is there any way i can make it happens that when i reload the page the input field should be hidden..

reply button

<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
   <span class="btn reply" id="replyb">Reply</span> 
</div>

input field

<div  class="col-lg-12" style="background:#eff9c7;">
    <input type="text"  id="reply" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>

so here what im trying to make is when i reload the page the input field should be hidden and when i click the reply button it will show.. and when i click it again it will hide.. i tried using toggle() on jquery it works but the problem is if i reload the page the button is visible which is not the right thing.. i even tried to use .show() and .hide() but it seems im missing something so it doesn't work on my end. is there any way i can make it happens that when i reload the page the input field should be hidden..

• javascript
• php
• jquery
• html
• css

• use css display:none or use cookie, if cookie set then don't show else show. – Mubashar Iqbal Commented Apr 12, 2017 at 10:07
• $(function () { $('#reply').hide(); }); $( "#replyb" ).on('click', function() { $( "#reply" ).toggle(); }); – Gaurav Commented Apr 12, 2017 at 10:07
• use css display:none, when page load its hide.... – Bilal Ahmed Commented Apr 12, 2017 at 10:08

4 Answers 4

Use the following code snippet:

Remember the initial state should be hidden style="display:none;"

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="replybutton" class="btn4 like">
<span class="btn reply" id="replyb" onClick="$('#reply').toggle();">Reply</span> 
</div>

    <input type="text"  id="reply" class="form-control pull-right"  placeholder="Write a reply..." style="display:none;"/>

You can also use the click listener approach:

    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="replybutton" class="btn4 like">
    <span class="btn reply" id="replyb">Reply</span> 
    </div>
        <input type="text"  id="reply" class="form-control pull-right"  placeholder="Write a reply..." style="display:none;"/>
        
<script>
$(document).ready(function(){
  $('#replyb').click(function(){
    $('#reply').toggle();
  });
});
</script>

$('#replybutton').click(function() {
  $('#reply').toggle()
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="replybutton" class="btn4 like" style="">
  <span class="btn reply" id="replyb">Reply</span>
</div>
<div class="col-lg-12" style="background:#eff9c7;">
  <input type="text" id="reply" class="form-control pull-right" style="width:88%;height:25px;margin-top:0px;" placeholder="Write a reply..." hidden />
</div>

You can use:

style='visibility:hidden' or style='display:none'.

$('#replyb').click(function() {
  $('#reply').toggle()
})

Try to use like:

<script>
$(document).ready(function(){
  $('#replyb').click(function(){
    $('#reply').toggle();
  });
});
</script>