I want to show a hidden div once a user click on a text input and remove the div that was displayed, but if the user click again on the text input I don't want the div that just got deleted to show up again.
I have tried this so far:
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
.
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$(" #div2").toggle();
});
});
I think this below snippet solves your problem, please let me know if this helps you!
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$("#div1").hide();
$(" #div2").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
I want to show a hidden div once a user click on a text input and
remove the div that was displayed
Add a focus event to the input
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
Demo
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
#div2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
$(document).ready(function(){
$("#input").click(function(){
$("#div1").toggle();
});
});
Don't make two buttons, one for hide and other one for show.
Make one button and use toggle().
Now that's all you need ... This will definitely work.
Read this it will help you
https://www.javatpoint.com/jquery-toggle
:)
Related
hello i'm using javascript to show and hide element. its working but when loading the page the element still visible until i click on the button then it will be hiding. in my case i need the opposite ( the element should not be visible on loading page until i click on the button)
this is my code :
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
(function($){
$(document).ready(function(){
$('#hideshow').click(function(){
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
did i miss something ?
Apply display:none:
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
Alternatively you can hide it programmatically on page load:
$('.price-rules-table-wrapper').hide();
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
div show after input click event.i'm added toggle function when i'll click input field div will show but i stuck in when i click more time input field div will not toggle and more div will append
$(document).ready(function(){
$("#date_id").on("click", function(){
this.insertAdjacentHTML("afterEnd", "<div id='lbl_date'>test</div>");
});
$("#lbl_date").toggle();
});
#lbl_date{
position: relative;
background-color:#FFAA41;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" id="date_id" class="date"/>
<label for="lbl_date">date</label>
after i'm using $('').off() and $().one() this but again toggle div not working it's possible please help me
Expect when i'll click input field div will toggle
You do like following trick what you want.
$(document).ready(function(){
$("#date_id").one("click", function(){
this.insertAdjacentHTML("afterEnd", "<div id='div_date'>test</div>");
});
$("#date_id").on("click", function(){
$("#div_date").toggle();
});
});
#div_date{
position: relative;
background-color:#FFAA41;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text" id="date_id" class="date"/>
<label for="lbl_date">date</label>
Note: id must be unique.
I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/
I'm trying to implement, what I thought would be a simple click, load, slideDown scenario. But I can't get the slideDown part to display.
I have the following two buttons:
<div>
<fieldset id="btn">
<input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db1" data-id=1" VALUE="DB1"/></br>
<input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db2" data-id="2" VALUE="DB2"/></br>
</fieldset>
</div>
I then have the following jQuery:
$(document).ready(function()
{
$('.databasebtn').on('click',function()
{
$(this).append("<div id='btnlist'></div>");
$('#btnlist').slideDown("200",function()
{
$('#btnlist').load("test78b.php");
});
})
});
The idea being that I click the button, I append the #btnlist div to the button, and fill the new div with the contents of test78b.php, which should generate a list of checkboxes.
It all works fine, except that I can't see the checkboxes. If I look at the code in the background it is all there, it just wont show up.
If I include 'test78b.php' separately it displays as expected.
Is there something I am missing?
You can not append div to a button, you can append div to a parent in this case fildset with this code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$(this).parent().append("<div id='btnlist'></div>");
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
or you can use insertBefore to append div before butoon clicked with this code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$("<div id='btnlist'></div>").insertBefore($(this))
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
or append div to the body tag with this other code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$("<div id='btnlist'></div>").appendTo('body')
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
and then, for a correct html code,you shouldn't have multiple items on the same page with the same id. The div added via script should not have id btnlist but class="btnlist"
DEMO http://jsfiddle.net/TWQbD/4/
$('.databasebtn').on('click',function() {
$(this).next('.databasetext').append("<div class='btnlist'>test78b.php</div>");
$(this).next('.databasetext').find('.btnlist').last().slideDown("1000");
});
I am trying to hide div when user clicks on checkbox, and show it when user unchecks that checkbox.
HTML:
<div id="autoUpdate" class="autoUpdate">
content
</div>
jQuery:
<script>
$('#checkbox1').change(function(){
if (this.checked) {
$('#autoUpdate').fadeIn('slow');
}
else {
$('#autoUpdate').fadeOut('slow');
}
});
</script>
I am having a hard time to get this working.
Make sure to use the ready event.
Code:
$(document).ready(function(){
$('#checkbox1').change(function(){
if(this.checked)
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
HTML
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<div id="block">Some text here</div>
css
#block{display:none;background:#eef;padding:10px;text-align:center;}
javascript / jquery
$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
});