Develop Reference

JavaScript is not working on my html document

I have a button on my HTML document as listed below
<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">
And I have this block of jQuery at the bottom of the document. It is supposed to fade in the div with the id "gold" when the button is clicked.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow');
});
});
</script>
However the code does not seem to work/trigger and nothing happens. Any suggestions to why this is happening is greatly appreciated.
Note: display: none is applied to the "gold" div in css, but I want the div to fade in once the button is clicked.

Split up your script tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>
Edit: JSFiddle

Here is working example:
$(document).ready(function () {
$("#mac").click("input", function(){
$('#gold').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "submit" id = "mac"value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;">
<div id="gold">Some content</div>

Change your javascript like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>

If your div#gold is display:none;
you need to update your jQuqery to fadeIn("slow")
$('#mac').click(function(){
$('#gold').fadeIn('slow');
})

try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type = "submit" value = "button" class = "col-sm-1" style="white- space:normal;" id = "mac">
<div id="gold" style="display:none">
hello
</div>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow')
});
});
</script>

What am I doing wrong? I'm trying to make an image bigger and smaller on a click with jQuery

I'm trying to make an image bigger when I click on a link but it won't work.
What am I doing wrong?
JQUERY:
$(document).ready(function(){
$('a, large').click(function(){
$("img").animate({width: "300px"});
});
$('a, small').click(function(){
$("img").animate({width: "75px"});
});
});
HTML:
<center>
<img src="TCRlogo.png"/></br>
Large - Small
</center>

Try the Following:
$('#small').click(function(){
...
});
and
$('#large').click(function(){
...
});

Your selector is wrong. It should be like #id.
Please check below snippet for more understanding.
$(document).ready(function(){
$('a#large').click(function(){
$("img").animate({width: "300px"});
});
$('a#small').click(function(){
$("img").animate({width: "75px"});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"/></br>
Large - Small
</center>

check demo
JQUERY:
$(document).ready(function(){
$('#large').click(function(){
$("img").animate({width: "300px"});
});
$('#small').click(function(){
$("img").animate({width: "75px"});
});
});
HTML:
<center>
<img src="TCRlogo.png"/></br>
Large - Small
</center>

try this
$(document).ready(function(){
$('#large').click(function(){
$("img").animate({width: "300px"});
});
$('#small').click(function(){
$("img").animate({width: "75px"});
});
});

try this
$('#large').click(function(){
$(".img1").animate({width: "300px"});
});
$('#small').click(function(){
$(".img1").animate({width: "70px"});
});

Trying to make hidden div fade in on click

I'm looking for some help with fading hidden div's in.
This is what I have so far, but it doesn't seem to want to work, the div just appears with no fade.
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
$('.one').click(function(){
$("#one").fadeIn("5000");
});
html
<body>
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>

Just click event on alike this:
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
//e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(5000).siblings('div').hide();
});
Fiddle

setTimeout(function() {
$("#one").css('display','none');
}, 5000);

Try this.
$("body").on('click', '#button-hide' function(e){
$("#" + $(this).attr("class")).show().siblings('div').hide();
})
$("body").on('click', '#button-show' function(e){
$("#one").fadeIn("5000");
})
For best answers, please explain more detail you problem. Include the context and example.
Salute!

you don't see the change because "One" is staying on the same position. Try to hide it first, then you can fadeIn
$('.one').click(function(){
$("#one").hide().fadeIn("5000");
});

Link onClick event needs to show just one DIV

I have this code, works fine but the problem is when I click on link (1) shows all the DIVs while I need each Link showing ONLY its own div.
Java Script
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Map //Link(1)
<div class="slidingDiv">
hide
</div>
Map//Link(2)
<div class="slidingDiv">
hide
</div>
Map//Link(3)
<div class="slidingDiv">
hide
</div>
//...............And so on.....
If I click on any of those links it shows all the DIVs while it should show just its own one.
How to do that?

You are targeting all elements with slidingDiv class, Change below code
$(".slidingDiv").slideToggle();
As below and try
$(this).next(".slidingDiv").slideToggle();
Update*:
You have show_hide class as child of slidingDiv to handle it's click event try below code
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var div = $(this).next(".slidingDiv");
console.log(div);
if (!div.length) {
div = $(this).parent('.slidingDiv');
}
console.log(div);
div.slideToggle();
});
});
jsFiddle

Try this;
HTML:
Map //Link(1)
<div class="slidingDiv">
hide1
</div>
Map//Link(2)
<div class="slidingDiv">
hide2
</div>
Map//Link(3)
<div class="slidingDiv">
hide3
</div>
jQuery:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(this).next().slideToggle();
});
});
Here is the fiddle: http://jsfiddle.net/MrvXB/

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.

You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin

Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});

Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});

Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);