How to use jquery fadeToggle

Question

Hi everyone i want to learn how to use jquery fadeToggle for my DEMO

In this demo you can see there is a click show div div. When you click this div then .gelen-mesaj-alani is showing. My question is how can a hide this div when clicked other area ?

$(document).ready(function(){
  $('.click').on('click',function(){
     $(".gelen-mesaj-alani").fadeToggle(300);
  });                  
});

do you want to hide
click show div
? – PashaB Feb 12 '15 at 14:41 — PashaB, Feb 12 '15 at 14:41

score 1 · Accepted Answer · answered Feb 12 '15 at 14:39

1

You can bind the click event on body. if target have no closest element with class .click or .gelen-mesaj-alani then hide the element:

$('body').on('click', function(e) {
 if($(e.target).closest('.click').length == 0 && $(e.target).closest('.gelen-mesaj-alani').length==0) {
    // click happened outside of menu, hide any visible menu items
   $(".gelen-mesaj-alani").fadeOut(300);
}});

Working Demo

answered Feb 12 '15 at 14:39

Milind Anantwar

81,290
25
94
125

This answer really enlighten me. Thank you. – Feb 12 '15 at 14:42
@milind-anatwar so if i have two div what can i do on that time ? Like this [DEMO](http://codepen.io/shadowman86/pen/ogEvdB) – Feb 12 '15 at 15:09
@innovation: i guess you want something like this http://codepen.io/anon/pen/yyvyJz – Milind Anantwar Feb 12 '15 at 17:00

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

Possible duplicate of: Use jQuery to hide a DIV when the user clicks outside of it

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

edited May 23 '17 at 11:49

Community

1
1

answered Feb 12 '15 at 14:38

yakutsa

642
3
13

How to use jquery fadeToggle

2 Answers2