show and hid div with jquery, php. I know its been asked but I can'tget it working

Question

First of all sorry if this is a redundant question. But I am having some issues.

In a nutshell, the show div section works as expected. It's the part where I click outside the div to close it that it fails. And when it fails it also disables the show() from working.

Here is a high level overview of the code. Notice the element id's

<div>
   <div id='expandmenu' ><button image to click></div>
</div>

The dropcontent class is basically display:none;

<div id='mymenu' class='dropcontent'>
  <a href .... >Choice 1</a>
  <a hrfe .... >Choice 2</a>
  .
  .
  .
</div>

my script file contains the following.

$(document).ready(function(){

   $("#expandmenu").click( function(e) {
      $('#mymenu').show();
   });

   .
   .
   .

});

This code works fine and when I click on the button image the menu is displayed as expected.

However, I would like to click outside of the menu to have the "mymenu" div close.

I wont include most of the code I have tried because they all fail. My friend sent me this code and it also fails

$("body").not("#expandmenu").click( function() {
   $('#mymenu').hide();
});

I am thinking that the click on body supersedes everything and hides the menu even if you try to open it.

Any suggestions in simple form would be appreciated. I am so new to js stuff.

Thanks

JT

Possible duplicate of [How do I detect a click outside an element?](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Selman Genç, Apr 14 '17 at 03:04
Please read the docs in order to understand _why_ the code is not working. `$("body").not("#expandmenu")` selects all `body` elements that don’t have `expandmenu` as an ID, which still is just your `body` element which includes the `#expandmenu` element. — Sebastian Simon, Apr 14 '17 at 03:06

score 2 · Answer 1 · answered Apr 14 '17 at 06:24

I have read your requirements and created a script. Please apply this code in your file.

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.expandmenu {
    background-color:#ccc;
    width:60px;
  height:20px;
}
.dropcontent {
    display:none;
    background-color:#ccc;
    display:block;
    width:300px;
}
</style>
<script>

$(document).click(function (e) {
    if (!$(e.target).hasClass("expandmenu") 
        && $(e.target).parents(".dropcontent").length === 0) 
    {
        $(".dropcontent").hide();
    }
});
function displayBlock() {
    document.getElementById("mymenu").style.display="block";
}

</script>
 
</head>
<body>
<div><button id='expandmenu' class="expandmenu" onclick="displayBlock()">Click</button></div>
<div id='mymenu' class='dropcontent'>
  <a href .... >Choice 1</a>
  <a hrfe .... >Choice 2</a>
  .
  .
  .
</div>


</body>

</html>

If it is helpfull for you! can you please accept as a answer. — roopa mishra, Apr 17 '17 at 05:25

score 0 · Answer 2 · answered Apr 14 '17 at 04:33

document.getElementById("expandmenu").addEventListener("click", functio_test);

function functio_test(){
var x = document.getElementById("expandmenu");
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
function myFunction(){
    var x = document.getElementById("expandmenu");
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}

#expandmenu {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

<div id="expandmenu" > 
      press me 
</div>
<button onclick="myFunction()">Try it</button>

This is simple and works Any doubts you have, ask, that I will try to answer.

show and hid div with jquery, php. I know its been asked but I can'tget it working

2 Answers2