Develop Reference

jQuery - Changing Div Height On Click/Unclick

Creating an accordion style menu. On click the accordion div opens and animates great. That all works just fine. However after expanded the hidden div I want the title div to shrink slightly and then as the accordion div is collapsed have it revert to the original size.
I have a JSFiddle setup. Essentially need to correct the second click to revert the div height back to original. The first click is functioning correctly and adding the class and animating the height change. However the second click isn't recognized.
What simple thing am I overlooking?
$(function() {
$(".click").on('click', function(){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
});
$(".click.expanded").on('click', function(){
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
});
});

The issue is that your click item doesn't have the expanded class at start, so your binding isn't working.
You should being doing something like:
$(document).on('click','.click.expanded',function(){//event work});
To address the comments, yes you need to handle the original event, you can do this using the .not selector so that the first event doesn't fire.
$(document).on('click','.click:not(.expanded)', function()
In the end, your code could look something like this:
$(function() {
$(document).on('click','.click:not(.expanded)', function(){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
});
$(document).on('click',".click.expanded", function(){
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
});
});
Obligatory Fiddle
This question Event binding on dynamically created elements?, even though about dynamic elements, addresses your problem.

As #JasonWilczak has stated the problem you have is that you don't have any elements on load which will have the expanded class, and therefore they won't be assigned this click event handler.
However you will still have a problem if you use event delegation as the original click event handler will still be fired also.
A cleaner solution would be to only have one click event handler, and detect the expanded class within the callback.
Dependant on the expanded class being present run different logic conditionally.
$(".click").on('click', function(){
if (!$(this).hasClass("expanded")){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
}
else {
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
}
});
I've updated your jsFiddle to demonstrate this:
http://jsfiddle.net/ecLxkgj9/4/

Here is the updated fiddle
$(".click").on('click', function(){
if (!$(this).hasClass("expanded")){
$(".animate").animate({height: '50px',},"slow");
}
else {
$(".animate").animate({height: '100px',},"slow");
}
$(this).toggleClass("expanded");
});

How do you create a click function that changes html properties?

I am using Jquery to make click events. It is simple when I am changing css properties, but one of my elements I am trying to change (a canvas) the size in HTML.
I am trying to access and change this html code on a click - width and height:
<canvas id="testCanvas" width="755" height="500" > </canvas>
with this jquery
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$getElementById('testCanvas').animate({width="200"}, 250);
})
Is this the best way to go about it? if so, could I please have some advice with the syntax to make it work? I am getting an error of unexpected = sign
Thanks a lot

Fetch element using id selector in jquery,
document.getElementById('testCanvas') is equivalent to $('#testCanvas')
and the correct syntax for .animate() is like:
$('#testCanvas').animate({width:"200"}, 250);

Make sure your click events are when the document is ready. Also document.getElementById isn't used in JQuery. This works:
$(document).ready(function() {
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$('#testCanvas').attr("width", "200");
});
});
If you want it to be a smooth animation simply change it to this:
$(document).ready(function() {
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$('#testCanvas').animate({width: "200"}, 250);
});
});
$.animate uses a colon instead of an equals sign.

To change an element attribute with jQuery use the .attr() method:
$("#testCanvas).attr("width", 200)

How to hide a div with direction and duration

I am working on the code below. Why am I not able to hide the #legend
div by this way?
$("#icon").on("click",function(){
$("#legend").hide('slide', {direction: 'left'}, 1000);
});
I also tried the animation way but it didn't work either.

I think you have used the syntax wrongly.. Just try like,
$(selector).hide(speed,easing,callback);
Please refer the jQuery document here...
I have updated a fiddle here... Please check this..
Hint: Here callback is a function which is executed after the animation completes. But it is not mandatory.. you can also leave this parameter..
Updated a Fiddle here with jQuery UI animation...

You can use the animate() method for that,
$('#legend').animate({width: '0'}, 1000, function(){
$(this).hide();
});
Check the Demo.

jQuery .focus() after .show()

I have the following code that hides one text box and shows another. When the next one shows, I need the cursor to be on it, so I call .focus() on it. However, even though I have the call to .focus() as the second parameter, it still isn't focusing. Any ideas?
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show(0, function() {
$(this).focus();
});
});
});

Sorry for the trouble everybody. It turns out that after messing with it some more, my DOM traversal wasn't quite right. I removed the divs I had around the input boxes and it works like a charm. Thank you.

That behavoiur occurs, becaus $(this) refers to the just hidden input field change your code like:
$(this).next().show(0, function() {
$(this).next().focus();
});

$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show().focus();
});
});
EDIT:
check this fiddle

Using Jquery background to change css - How to Allow only one link at a time

I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/

I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example

I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().

You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});

LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);