Div opens and closes when open button is clicked on

Question

Some of my recent and not so recent questions have not been received well so I would like to mention that you should be kind. Some other people have even down voted my questions for no apparent reason with no comment suggesting their reasoning. I don't happen to like this very much as it puts me at risk of being blocked from asking. Yes, I know that some of my posts aren't exactly the most thought out but people tend to over react to a simple mistake that has been in front of me the whole time. Now, onto the question.

TL;DR: Be kind!

I have a settings div:

<div id="settings">
    <p><a href="settings.php" class="settings">Search Settings</a></p>
    <p><a href="sync.php" class="settings">Sync Settings</a></p>
    <p><a href="anon.php" class="settings">Go Anonymous</a></p>
</div>

In order to open this div, I have a button:

<a onClick="openSettings()" href="#" class="footer" id="settings-button">Settings</a>

In order for the button to open the div, I have some simple JavaScript:

$("html").click(function(){
    $("#settings").slideUp()
});

$("#settings").click(function(e){
    e.stopPropagation();
});

function openSettings() {
    $("#settings").slideDown();
}

Now, for what ever reason, when I click the button, it opens the div and the closes it again. I find this very peculiar. At this point, I have no idea what to do. I have read two Stack Overflow questions that were answered successfully and I have even tried copy and pasting the exact code with no results.

Those articles here:

jQuery: Hide popup if click detected elsewhere

How do I make this popup box disappear when I click outside?

I am so very confused at this point and I don't quite know what to do. Any help with this is very much appreciated.

Best Regards, Emanuel

EDIT: Alright. It appears that I have forgotten to include my CSS styling, so here it is:

div#settings {
display: none;
position: absolute;
right: 20px;
bottom: 50px;
background-color: #9E9E9E;
width: 200px;
box-shadow: 2px 2px 10px #000000;
border-style: solid;
border-color: #000000;
border-width: 1px;
color: #551A8B;
padding-left: 15px;
}

guest271314 · Accepted Answer · 2015-05-30T00:44:40.400

$("html").click(function(){
    $("#settings").slideUp()
});

appear to be called after click on #settings-button , which calls .slideUp() after .slideDown() , at each click on html element , document .

it is supposed to be hidden normally and when you click the button, it slides up. When you click anywhere outside while it is open, it slide away.

Try adding $(document).one("click", fn) at .slideDown() callback to slide up #settings div on click of document outside of #settings

Try substituting .on("click") for onclick within html ; caching #settings selector ; calling .slideDown() , .slideUp() from within openSettings

$(function() {

  var elem = $("#settings");

  function openSettings() {
    elem.is(":hidden") 
    ? elem.slideDown(function() {
        $(document).one("click", function(e) {
          elem.slideUp()
        })
      }) 
    : elem.slideUp();
  }

  $("#settings-button").on("click.show", openSettings);

  elem.click(function(e) {
    e.stopPropagation();
  });

});

body {
  width: 100%;
  height: 100%;
}
div#settings {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 50px;
  background-color: #9E9E9E;
  width: 200px;
  box-shadow: 2px 2px 10px #000000;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  color: #551A8B;
  padding-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="settings">
  <p><a href="settings.php" class="settings">Search Settings</a>
  </p>
  <p><a href="sync.php" class="settings">Sync Settings</a>
  </p>
  <p><a href="anon.php" class="settings">Go Anonymous</a>
  </p>
</div>
<a href="#" class="footer" id="settings-button">Settings</a>

Your answer is great in all but it doesn't close when you click outside of the div. Thanks for your answer though! — Emanuel Elliott, May 29 '15 at 23:27
@EmanuelElliott Is requirement for `#settings` to slide up if any `click` event occur within `html` ? — guest271314, May 29 '15 at 23:30
No it is supposed to be hidden normally and when you click the button, it slides up. When you click anywhere outside while it is open, it slide away. — Emanuel Elliott, May 29 '15 at 23:32
_"No it is supposed to be hidden normally and when you click the button, it slides up."_ ? If hidden normally , when click button slide down ? — guest271314, May 29 '15 at 23:33
You click the button to make it appear. Yes, the jquery functions confused me as well, but the names appear to be inverted in the case that I am using them in. — Emanuel Elliott, May 29 '15 at 23:34
Thank you! Your edited answer was very, VERY helpful. You made it very easy, especially with the snippet. THANKS! — Emanuel Elliott, May 30 '15 at 03:07

Mihey Egoroff · Answer 2 · 2015-05-29T23:12:48.320

0

I think you're using stopPropagation on a wrong element, it should be #settings-button:

$("#settings-button").click(function(e) {
  e.stopPropagation();
});

Example

edited May 29 '15 at 23:12

answered May 29 '15 at 23:07

Mihey Egoroff

1,542
14
23

No. If I do that, then the onClick on the button does not work. The intention of that stopPropagation is to not close the settings div if you click on it or one of its child elements. – Emanuel Elliott May 29 '15 at 23:28

Div opens and closes when open button is clicked on

2 Answers2