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;
}

Answer 1

$("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> 

Answer 2

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

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

Example