最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to showhide input type:text when button is click - Stack Overflow

programmeradmin1浏览0评论

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..

Share Improve this question edited Apr 12, 2017 at 10:14 Death-is-the-real-truth 72.3k10 gold badges57 silver badges104 bronze badges asked Apr 12, 2017 at 10:05 Lion SmithLion Smith 6553 gold badges19 silver badges50 bronze badges 3
  • 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
Add a ment  | 

4 Answers 4

Reset to default 2

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>
发布评论

评论列表(0)

  1. 暂无评论