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

Multi tool use
Multi tool use








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>








jquery







share|improve this question























  • 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














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>








jquery







share|improve this question























  • 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












up vote
0
down vote

favorite









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>








jquery







share|improve this question















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




jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 19 hours ago









Tân Nguyễn

2,99132048




2,99132048










asked 20 hours ago









Lukasz Staszewski

63




63











  • 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















after clicking outside the div - which div are you talking about (#show or .menu)?
– Tân Nguyễn
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




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












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();
 
);





share|improve this answer




















    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

















    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    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();
     
    );





    share|improve this answer
























      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();
       
      );





      share|improve this answer






















        up vote
        0
        down vote



        accepted







        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();
         
        );





        share|improve this answer












        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();
         
        );






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 19 hours ago









        DPS

        452112




        452112



























             

            draft saved


            draft discarded















































             


            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

































































            Bjxv v0gkVau ykCm4kRkcdeLd3Mvg0uj3,NprwEYq6V,u 8tQ1OxIOOZ3K49Ba,pfFg8,vItsUC53,Rz h uW7jflQ,DNr
            -
            PqS1Kvy6SOZOAhTCmdIdQ,beXE eWW942Q pxDydXky0mhaf Owa3qF0,h,My453Fn4adK0Uw9,N

            Popular posts from this blog

            Top Tejano songwriter Luis Silva dead of heart attack at 64

            Image
            Ramiro Burr's New Blog - to go back: www.ramiroburr.com From Latin rock to reggaeton, boleros to blues,Tex-Mex to Tejano, conjunto to corridos and beyond, Ramiro Burr has it covered. If you have a new CD release, a trivia question or are looking for tour info, post a message here or e-mail Ramiro directly at: musicreporter@gmail.com Top Tejano songwriter Luis Silva dead of heart attack at 64 By Ramiro Burr on October 23, 2008 8:40 AM | Permalink | Comments (12) | TrackBacks (0) UPDATE: Luis Silva Funeral Service details released Visitation 4-9 p.m. Saturday, Rosary service 6 p.m. Saturday at Porter Loring, 1101 McCullough Ave Funeral Service 10:30 a.m. Monday St. Anthony De Padua Catholic Church, Burial Service at Chapel Hills, 7735 Gibbs Sprawl Road. Porter Loring (210) 227-8221 Related New Flash: Irma Laura Lopez: long time record promoter killed in accident NewsFlash: 9:02 a.m. (New comments below) Luis Silva , one of the most well-known ...
            Read more

            Can't figure out why I get Error loading static resource from app.xaml

            Image
            1 I having trouble getting my ResourceDictionary.MergedDictionaries to load from app.xaml. My WPF app has a static class with a Main defined and startup object set to it. Within Main I created an instance of App and run it. The override OnStartup fires and the mainwindow.cs InitializeComponent gives the error "Message "Cannot find resource named 'MaterialDesignFloatingActionMiniAccentButton'. If I put the resources in the mainwindow.xaml everything is fine, but I wanted them to load at the app level so I they are not in each page. Any help appreciated. public partial class App protected override void OnStartup(StartupEventArgs e) base.OnStartup(e); var app = new MainWindow(); var context = new MainWindowViewModel(); app.DataContext = context; app.Show(); from the Main.. var app = new App(); app.Run(); app.xaml.. <Application x:Class="GS.Server.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:...
            Read more

            How to fill missing numeric if any value in a subset is missing, all other columns with the same subset are missing

            Image
            up vote 2 down vote favorite There is a clear pattern that show for two separate subsets (set of columns); If one value is missing in a column, values of other columns in the same subset are missing for any row. Here is a visualization of missing data My tries up until now, I used ycimpute library to learn from other values, and applied Iterforest. I noted, score of Logistic regression is so weak (0.6) and thought Iterforest might not learn enough or anyway, except from outer subset which might not be enough? for example the subset with 11 columns might learn from the other columns but not from within it's members, and the same goes for the subset with four columns. This bar plot show better quantity of missings So of course, dealing with missings is better than dropping rows because It would affect my prediction which does contain the same missings quantity relatively. Any better way to deal with these ? [EDIT] The nullity pattern is confirmed: machine-learning cor...
            Read more