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");
});

bind a click event to a div block generated on the fly using jquery

I have a div which completely created on the fly when the page is loaded and this div is visible to the user and in firebug but when i view the page source its not available.. the content within the div changes dynamically.
im trying to bind a click event to it so when someone clicks on that div to alert a message..
i have go through almost all the suggestions but none of them work
my dynamic div
<div class="mootoo drive form2">Hello this a mootoo test</div>
Tested JQuery functions
$(document).on('click', ".mootoo", function() {
alert("clicked");
});
$('.mootoo').on('click',function() {
alert("clicked");
});
$('.mootoo').live('click',function() {
alert("clicked");
});
Can someone please tell me what am i doing wrong?
actually i cant find the JQ code where it generates the div But im having the exact same problem with this
http://jsfiddle.net/g1sqrxg6/3/
if you see when i click it doesnt alert "chosen-choices" is the dynamically created class..
in that case i when a user selects and or clicks on that div or box i need to put an alert

Your first function
$(document).on('click', ".mootoo", function() {
alert("clicked");
});
should work as you can see in this fiddle.
So the problem is not that your div is dynamically generated.
Update:
$(document).on("click",".chosen-container", function() {
alert("clicked");
});
Fiddle

Jquery wouldn't hide an element

Done this a few times before, but something is wrong this time. Trying to create a popup. As you can guess, initially, it's hidden. It does show up on click, but when i try to close it, nothing happens. Also, when i try to change styles to display:none in developer tools, it switches back to display:block. Currently it's in the head section of the page, but i've tried placing it in the very bottom as well.
html of it
<div class="tablecell midlineunit popup-hml middle">
<div class="hml-popup-bg popupbg ">
<div class="hml-popup-cnt">
<div class="closepopup">X</div>
</div>
</div>
</div>
and js of it
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(){
$(this).parent().parent().hide();
});
});
and of course .hml-popup-bg is hidden in css

you can use this .. no need for .each() just use .click() and you can use .closest() instead of parent().parent();
$(".popup-hml").click(function(){
$(this).find(".hml-popup-bg").show();
});
$(".closepopup").click(function(e){
e.stopPropagation();
$(this).closest('.hml-popup-bg').hide();
});

This should work. Its because you close it, but dont stop propagation, so it gets opened again, through bubbling.
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(e){
e.stopPropagation();
$(this).parent().parent().hide();
});
});
https://jsfiddle.net/qcqacbyd/

Your usage of jQuery's .each() seems misplaced. What you really want to set up, I think, are 2 event listeners - one to open the popup when you click a button, another to close it when clicking the "X".
You might accomplish this with the following jQuery:
$(document).on("click", ".popup-hml", function(){
$(".hml-popup-bg").show();
});
$(document).on("click", ".closepopup", function(){
$('.hml-popup-bg').hide();
});

trouble using this script to make the button close by clicking outside

I'm trying to use the following script to make the button close its menu by clicking outside of it.
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});});
You can see the demo ([Ideal Fiddle])(http://jsfiddle.net/craigmdennis/H2Chj/2/)
But my button ([Problematic Fiddle]) (http://jsfiddle.net/xJ9ug/) isn't working that well. It takes a few clicks to open the menu. Would you please tell me what's wrong with the css or the script? Any help is much appreciated.

Check out this fiddle. All you need is a simple condition check to make this work.
if ($('#dropdown').has(e.target).length === 0)

actually your code is correct .. the reason why it is not working is it have <input type="checkbox" /> inside a span and click event is being added for span. I don't know the exact reason why checkbox is not let the event propogate but removing the checkbox works like a charm..
and yea one more thing you haven't closed first span tag properly.
working demo without checkbox HERE
use addClass() and removeClass() to acheive the effect you demo had.
thanks

Add .dropdown_content li a,its working now..
$(document).ready( function(){
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown_content li a').toggle();
});
});

Click anywhere in the page to close div

I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>

Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.

DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.

Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.