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..
- 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
Reset to default 2Use 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>