We Keep Coding

Click button to show div, then remove button

I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>

The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.

I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview

but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>

More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>

Show/Hide Div by clicking another div

I am a beginner at javascript and I wrote a simple code trying to show/hide a div simply by clicking on another div. If someone can check the code I wrote and correct me I would be really grateful. Thanks in advance.
$('DivBlue').ready(function() {
$('DivRed').on('click', function(){
document.getElementById('DivBlue').style.display = 'block';
});
});
.DivRed{
position:absolute;
top:0;
left:0;
width:15vw;
height:15vw;
background-color:red;
}
.DivBlue{
position:absolute;
display:none;
right:0;
bottom:0;
width:15vw;
height:15vw;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivRed"></div>
<div class="DivBlue"></div>

You can do this with the toggle() function in the jQuery library. toggle() with no arguments is a to shortcut show/hide an DOM element.
Also, it is good practice to use .ready() on the document instead of an element of the DOM.
So, your JS code should look like:
$(document).ready(function() {
$('.DivRed').on('click', function(){
$('.DivBlue').toggle();
});
});
DEMO

Toggle does the trick in jQuery:
$(document).ready(function() {
$('.DivRed').on('click', function() {
$('.DivBlue').toggle();
});
});

Replace your JavaScript with this and it will surely work.
$(document).ready(function() {
$('.DivRed').click(
function() {
$('.DivBlue').toggle();
});
});

You are making few mistakes here,
You cant get a div by a class name with document.getElementById() method. You need to use document.getElementsByClassName() method.
document.getElementsByClassName() return a NodeList. You can't apply CSS for a NodeList. So you need to select a Node to apply CSS using document.getElementsByClassName('DivBlue')[0]
To work your code should be changed as
$('DivBlue').ready(function() {
$('DivRed').on('click', function(){
document.getElementsByClassName('DivBlue')[0].style.display = 'block';
});
});

How to toggle a .on("click") function

See below code. When clicked this makes the text Bold. I would like to be able to toggle between 'normal' and 'bold' text by clicking the same button. How could I achieve this?
$("#InputsWrapper").on("click", ".boldText", function (e) {
e.preventDefault();
$(this).parent().find(".fTypex").css({"font-weight":"bold"});
});

The better approach would be to toggle the class with toggleClass:
CSS:
.bold { font-weight: bold; }
JavaScript:
$('#InputsWrapper').on('click', '.boldText', function(e) {
$(this).parent().find('.fTypex').toggleClass('bold');
e.preventDefault();
});
DEMO: http://jsfiddle.net/bz9wnh6m/

what you want is the .toggleClass() method.
here is a link
and a example
<script>
$("#InputsWrapper").on("click", ".boldText", function (e) {
e.preventDefault();
$(this).parent().find(".fTypex").toggleClass("bold-text");
});
</script>
<style>
.bold-text{
font-weight":"bold;
}
</style>

EDITED:
HTML:
Bold
<div class="text"> Here is the text </div>
JS:
$(".boldtrigger").click(function() {
$(".text").toggleClass("bold");
});
Here's a working example for JQUERY 2.0+ using the toggleClass() method: http://jsfiddle.net/S9qDD/
Cheers!

Change Background color (css property) using Jquery

I want to Change the background colour on click . This is my code work that i tried.pls help me out :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function(){
$(#co).click(change()
{
$(body).css("background-color":"blue");
});
});
Css code
body
{
background-color:red;
}
Body code
<body>
<div id="co" click="change()">
hello
</div>

You're using a colon instead of a comma. Try:
$(body).css("background-color","blue");
You also need to wrap the id in quotes or it will look for a variable called #co
$("#co").click(change()
There are many more issues here. click isn't an HTML attribute. You want onclick (which is redundant). Try this:
<div id="co"> <!-- no onclick method needed -->
<script>
$(document).ready(function() {
$("#co").click(function() {
$("body").css("background-color","blue"); //edit, body must be in quotes!
});
});
</script>
You were trying to call an undefined method. It looks like you were trying to declare it inside the callback statement? I'm not sure. But please compare this to your code and see the differences.
http://jsfiddle.net/CLwE5/ demo fiddle

Try this
$("body").css({"background-color":"blue"});

$("#co").click(function(){
$(this).css({"backgroundColor" : "blue"});
});

The code below will change the div to blue.
<script>
$(document).ready(function(){
$("#co").click({
$("body").css("background-color","blue");
});
});
</script>
<body>
<div id="co">hello</div>
</body>

1.Remove onclick method from div element
2.Remove function change() from jQuery code and in place of that create an anonymous function like:
$(document).ready(function()
{
$('#co').click(function()
{
$('body').css('background-color','blue');
});
});

$("#bchange").click(function() {
$("body, this").css("background-color","yellow");
});

Change Background Color using on click button jquery
Below is the code of jquery, which you can put in your head tag.
jQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").addClass("myclass");
});
});
</script>
CSS Code:
<style>
.myclass {
background-color: red;
padding: 100px;
color: #fff;
}
</style>
HTML Code:
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<button>Click Here</button>
</body>

Try below jQuery snippet, you can change color :
<script type="text/javascript">
$(document).ready(function(){
$("#co").click(function() {
$("body").css("background-color", "yellow");
});
});
</script>
$(document).ready(function(){
$("#co").click(function() {
$("body").css("background-color", "yellow");
});
});
body {
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="co" click="change()">hello</div>

How to target an element under an other element?

I can click on a button (button A) and with some jquery it makes an image visible on this button at the exact same position (position:absolute).
See this fiddle
I would like to click again on this button (button A) to hide the image but i don't know how because the image is over the button.
I've found other solutions (more jquery or use an invisible image button) but i would like to find a more elegant way.
How can i target the button which is under the image ?
Jquery Code :
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
if ($('#image_1').css('visibility') == 'hidden') {
$('#image_1').css('visibility', 'visible');
} else {
$('#image_1').css('visibility', 'hidden');
}
});
});
CSS :
#button
{
width:100px;
background-color:#666666;
height:25px;
position:absolute;
left:10px;
top:10px;
}
#image_1
{
width:100px;
background-color:#666666;
height:25px;
position:absolute;
left:10px;
top:10px;
visibility:hidden;
}
html
<div id=main>
<div id="button">
</div>
<div id="image_1">Hello World!
</div>
</div><!-- main -->
#closure #Justin John #Jai #Robz #Adam #Happy Singh #Ross Dargan #Wouter de Kort #Viral Patel #Ruben Stolk
Thank you for all your interesting answers. It's difficult to choose because there are some really good ones. I've chosen Adam's answer because it's the simplest (juste use toglle jQuery and a css class). If you think your answer is better, please post your arguments here.

I binded the click event to both the #button and the #image by adding the class button to them both; when you click either, it will show/hide the image.
Also if you use display: none instead of visibility: hidden you can use jQuery's toggle(), which saves you a few lines of code.
see the fiddle
$(document).ready(function() {
$('.button').click(function() {
$('#image_1').toggle();
});
});

How about something like:
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
$('#image_1').show();
});
$('#image_1').click(function() {
$(this).hide();
});
});​
Check this demo: http://jsfiddle.net/viralpatel/R5MVD/1/

It is easier to put the image div inside your button div. You can also use the jQuery toggle function to show/hide the image.
<div id=main>
<div id="button">
<div id="image_1">Hello World!
</div>
</div>
</div><!-- main --> ​
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
$('#image_1').toggle();
})
});​
Here is a fiddle that shows it: http://jsfiddle.net/jBaWN/2/

This fiddle shows how it can be done easliy: http://jsfiddle.net/33aus/1/
Note I changed the image's css to display:none.
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(toggleVisiblity);
$('#image_1').click(toggleVisiblity);
});
function toggleVisiblity()
{
$('#button').toggle();
$('#image_1').toggle();
}​

See the updated fiddle http://jsfiddle.net/eCCR6/8/
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
if ($('#image_1').css('visibility') == 'hidden') {
$('#image_1').css('visibility', 'visible');
}
});
$('#image_1').click(function() {
if ($('#image_1').css('visibility') == 'visible') {
$('#image_1').css('visibility', 'hidden');
}
});
});

just change your javascript to
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
if ($('#image_1').css('visibility') == 'hidden') {
$('#image_1').css('visibility', 'visible');
} else {
$('#image_1').css('visibility', 'hidden');
}
});
$('#image_1').click(function(){
$('#image_1').css('visibility', 'hidden');
});
});

I think you have to trigger the button on mousedown on img 1 try this one:
$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
if ($('#image_1').css('visibility') == 'hidden') {
$('#image_1').css('visibility', 'visible');
} else if ($('#image_1').css('visibility') == 'visible') {
$('#image_1').css('visibility', 'hidden');
}
$('#image_1').mousedown(function(){
$('#button').click();
});
});
});
Here we have done 1 else if check and trigger the button click on mousedown event on #image_1.
checkout the fiddle: http://jsfiddle.net/eCCR6/16/

You can also combine both selectors like this in fiddle.
$('#button, #image_1').click(function() {
// Your code
});

See the fiddle http://jsfiddle.net/eCCR6/2/.
I have created the function like this, and bound to both:
function clickFn() {
if ($('#image_1').css('visibility') == 'hidden') {
$('#image_1').css('visibility', 'visible');
} else {
$('#image_1').css('visibility', 'hidden');
}
}
Another model is to bind your event to the parent div main.
See the fiddle http://jsfiddle.net/eCCR6/18/

Use the jquery .prev() or .next() function

Instead of causing the image to become responsive to clicking (which does not work when there are multiple buttons below the image), you could make the image non-responsive to clicks using the pointer-events CSS property. It would look something like this:
#image_1
{
pointer-events: none;
}
See fiddle: http://jsfiddle.net/eCCR6/31/
This will cause clicks to pass through the image directly to the button below.
The disadvantage to this method is that the image no longer responds to mouse movement, but in this case, that's okay.