Show/Hide div on click and disappears after clicking outside the div

up vote
0
down vote

favorite

Will someone do to me so that after clicking outside the div - div disappeared? Because now it disappears only when you click Click to Show / Hide div again

$(document).ready(function()
 $('#show').click(function() 
 $('.menu').toggle(1,"linear", "slide");
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>

edited 19 hours ago

Tân Nguyễn

2,99132048

asked 20 hours ago

Lukasz Staszewski

after clicking outside the div - which div are you talking about (#show or .menu)?
– Tân Nguyễn
19 hours ago

.menu (the one that appears after clicking in #menu)
– Lukasz Staszewski
19 hours ago

add a comment |

up vote
0
down vote

favorite

Will someone do to me so that after clicking outside the div - div disappeared? Because now it disappears only when you click Click to Show / Hide div again

$(document).ready(function()
 $('#show').click(function() 
 $('.menu').toggle(1,"linear", "slide");
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>

edited 19 hours ago

Tân Nguyễn

2,99132048

asked 20 hours ago

Lukasz Staszewski

after clicking outside the div - which div are you talking about (#show or .menu)?
– Tân Nguyễn
19 hours ago

.menu (the one that appears after clicking in #menu)
– Lukasz Staszewski
19 hours ago

add a comment |

up vote
0
down vote

favorite

Will someone do to me so that after clicking outside the div - div disappeared? Because now it disappears only when you click Click to Show / Hide div again

$(document).ready(function()
 $('#show').click(function() 
 $('.menu').toggle(1,"linear", "slide");
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>

edited 19 hours ago

Tân Nguyễn

2,99132048

asked 20 hours ago

Lukasz Staszewski

Will someone do to me so that after clicking outside the div - div disappeared? Because now it disappears only when you click Click to Show / Hide div again

$(document).ready(function()
 $('#show').click(function() 
 $('.menu').toggle(1,"linear", "slide");
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>

$(document).ready(function()
 $('#show').click(function() 
 $('.menu').toggle(1,"linear", "slide");
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>

$(document).ready(function()
 $('#show').click(function() 
 $('.menu').toggle(1,"linear", "slide");
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>

jquery

edited 19 hours ago

Tân Nguyễn

2,99132048

asked 20 hours ago

Lukasz Staszewski

edited 19 hours ago

Tân Nguyễn

2,99132048

asked 20 hours ago

Lukasz Staszewski

edited 19 hours ago

Tân Nguyễn

2,99132048

edited 19 hours ago

Tân Nguyễn

2,99132048

edited 19 hours ago

Tân Nguyễn

2,99132048

asked 20 hours ago

Lukasz Staszewski

asked 20 hours ago

Lukasz Staszewski

asked 20 hours ago

Lukasz Staszewski

after clicking outside the div - which div are you talking about (#show or .menu)?
– Tân Nguyễn
19 hours ago

.menu (the one that appears after clicking in #menu)
– Lukasz Staszewski
19 hours ago

add a comment |

after clicking outside the div - which div are you talking about (#show or .menu)?
– Tân Nguyễn
19 hours ago

.menu (the one that appears after clicking in #menu)
– Lukasz Staszewski
19 hours ago

after clicking outside the div - which div are you talking about (#show or .menu)?
– Tân Nguyễn
19 hours ago

.menu (the one that appears after clicking in #menu)
– Lukasz Staszewski
19 hours ago

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

I hope this is your requirement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>


 $('#show').click(function() 

 $('.menu').toggle(1,"linear", "slide");

 //OR

 $('.menu').toggle();
 );

This will check your clicked element has no id=show

$(document).click(function(e) 

 if( e.target.id != 'show') 
 $(".menu").hide();
 
);

answered 19 hours ago

DPS

452112

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237341%2fshow-hide-div-on-click-and-disappears-after-clicking-outside-the-div%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

I hope this is your requirement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>


 $('#show').click(function() 

 $('.menu').toggle(1,"linear", "slide");

 //OR

 $('.menu').toggle();
 );

This will check your clicked element has no id=show

$(document).click(function(e) 

 if( e.target.id != 'show') 
 $(".menu").hide();
 
);

answered 19 hours ago

DPS

452112

add a comment |

up vote
0
down vote

accepted

I hope this is your requirement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>


 $('#show').click(function() 

 $('.menu').toggle(1,"linear", "slide");

 //OR

 $('.menu').toggle();
 );

This will check your clicked element has no id=show

$(document).click(function(e) 

 if( e.target.id != 'show') 
 $(".menu").hide();
 
);

answered 19 hours ago

DPS

452112

add a comment |

up vote
0
down vote

accepted

I hope this is your requirement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>


 $('#show').click(function() 

 $('.menu').toggle(1,"linear", "slide");

 //OR

 $('.menu').toggle();
 );

This will check your clicked element has no id=show

$(document).click(function(e) 

 if( e.target.id != 'show') 
 $(".menu").hide();
 
);

answered 19 hours ago

DPS

452112

I hope this is your requirement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
 <ol>
 <li>India</li>
 <li>US</li>
 <li>UK</li>
 <li>Australia</li>
 </ol>
 </div>


 $('#show').click(function() 

 $('.menu').toggle(1,"linear", "slide");

 //OR

 $('.menu').toggle();
 );

This will check your clicked element has no id=show

$(document).click(function(e) 

 if( e.target.id != 'show') 
 $(".menu").hide();
 
);

answered 19 hours ago

DPS

452112

answered 19 hours ago

DPS

452112

answered 19 hours ago

DPS

452112

answered 19 hours ago

DPS

452112

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth