We Keep Coding

Toggle menu but also allows click inside without closing

Firstly apologies for the random title, I really can't think of another way to word it succinctly.
This is my issue.
I have a couple of nav icons, that when clicked toggle menu displays, just like you see everywhere: facebook, etc.
When you click outside of the div it hides the menu.
It works but I have two problems.
Clicking outside works to close the open div, but clicking on the icon that triggers the toggle doesn't close it, it just re-toggles it instantly.
I would like to be able to click inside of the menus without them closing, which they are currently doing onclick.
The html looks something like this, where the user-menu is the click-able icon that toggles the div contained within.
HTML
<nav>
<div class="user-menu">
<div id="user-dropdown">MENU CONTENTS HERE</div>
</div>
</nav>
jQuery
$('.user-menu').click(function () {
$('#user-dropdown').fadeToggle();
});
$(document).mouseup(function(e) {
var container = $("#user-dropdown");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
FIDDLE
https://jsfiddle.net/vo8a1r0p/
EDIT - ANSWER
Using a mixture of Bhuwan's answer and a stopPropagation() it's now working.
Working jQUERY
$(document).on("click", function(e) {
if ($(e.target).hasClass("user-menu")) {
$('#user-dropdown').fadeToggle();
} else {
if ($(e.target).hasClass("dropdown-menu")) {
$('#user-dropdown').show();
} else {
$('#user-dropdown').fadeOut();
}
}
});
$("#user-dropdown").click(function(e){
e.stopPropagation();
});
Working FIDDLE
https://jsfiddle.net/ne4yfbjp/

You can try this
$(document).on("click", function(e) {
if ($(e.target).hasClass("user-menu")) {
$('#user-dropdown').fadeToggle();
} else {
if ($(e.target).closest("#user-dropdown").hasClass("dropdown-menu")) {
$('#user-dropdown').show();
} else {
$('#user-dropdown').fadeOut();
}
}
});
.dropdown-menu {
display: none;
background: gray;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div>
<button class="user-menu">Menu</button>
<div id="user-dropdown" class="dropdown-menu">
<div class="username">
Some User
</div>
<ul>
<li>Link1</li>
<li>Link1</li>
</ul>
</div>
</div>
</nav>

How to focus on a div that has just appeared?

I have this component:
$chevron.on('click', function(e) {
e.preventDefault();
$('.disclaimer-wrapper').slideDown('fast', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
<div class="disclaimer-wrapper"> //this div is hidden Hidden Content
</div>
</section>
I am trying to click on an anchor ($chevron) and then display the element .disclaimer-wrapper but the document is not focusing or scrolling down to that element when it appears so the user can't see the new content being displayed.
What am I missing?

jQuery Focus does not work on divs, however there is a workaround to that, in simple words, you need to set the tab index of div to -1, like this:
$('#chevron').on('click', function(e) {
e.preventDefault();
$('.disclaimer-wrapper').slideDown('fast', function() {
$(this).attr("tabindex", -1).focus();
});
});
.disclaimer-wrapper {
display: none;
}
.disclaimer-wrapper:focus {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
click
<div class="disclaimer-wrapper"> //this div is hidden Hidden Content
</div>
</section>
here is a fiddle of it, you can check it out.

Always close current div regardless of which trigger you click

How is it possible to close a div that's currently open when you click on its trigger that usely opens the div or any other trigger (that opens a different event on the page)?
So basicaly I have two links: Login and Register. When you click Register, the Login block/div disappears and the Register div shows up. When I hit Login, the Register div hides and the Login div shows up.
Also when I, e.g. click Login and the Login div is already shown - the Login div must hide aswell.
How do I accomplish this? I tried for days now, but unfortunately i'm a beginner to jQuery and my skills in jQuery aren't great at the moment. I made the following script that works. I only can hide/show divs when you click the same trigger. If you click Register AND Login the divs will just show up on top of eachother, without the hiding.
;(function($) {
var $jq = jQuery.noConflict();
$jq.fn.login_switch = function(options) {
var o = $jq.extend({}, $jq.fn.login_switch.defaults, options);
var $this = $jq(this);
$jq(this).click(function(e)
{
e.preventDefault();
// hides matched elements if shown, shows if hidden
$jq(this).closest("div#wrapper").children("div#member_login").eq(0)[o.method](o.speed);
});
};
$jq.fn.reg_switch = function(options) {
var o = $jq.extend({}, $jq.fn.reg_switch.defaults, options);
var $this = $jq(this);
$jq(this).click(function(e)
{
e.preventDefault();
// hides matched elements if shown, shows if hidden
$jq(this).closest("div#wrapper").children("div#member_reg").eq(0)[o.method](o.speed);
});
};
$jq.fn.login_switch.defaults = {
speed : "slow",
method: "slideFadeToggle"
};
$jq("a.log-expand").login_switch();
$jq.fn.reg_switch.defaults = {
speed : "slow",
method: "slideFadeToggle"
};
$jq("a.reg-expand").reg_switch();
var msie = false;
if(typeof window.attachEvent != 'undefined') { msie = true; }
$jq.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() {
if (msie) { this.style.removeAttribute('filter'); }
if (jQuery.isFunction(callback)) { callback(); }
});
};
};
})(jQuery);
My html is:
<div id="member_reg" style="display:none;">
<div class="container">
<div class="sixteen columns">
REGISTRATION.
</div>
</div>
</div>
<div id="member_login" style="display:none;">
<div class="container">
<div class="sixteen columns">
LOGIN.
</div>
</div>
</div>
with the trigger buttons:
<ul class="user">
<li>Register</li>
<li>Login</li>
</ul>

Here I have created a FIDDLE for you with the behavior I think you are trying to achieve.
Let me know if you have any questions or if I'm way off base.
HTML
<button id="btnLogin" data-bound="login">Login</button><button id="btnRegister" data-bound="register">Register</button>
<hr />
<div id="login" class="area" data-state="closed">
Login div
</div>
<div id="register" class="area" data-state="closed">
Register div
</div>
CSS
.area{
float:left;
width:200px;
height:0;
margin:10px;
overflow:hidden;
text-align:center;
line-height:100px;
}
#login{
background:#41cc36;
}
#register{
background:#3764e3;
}
JAVASCRIPT
$(document).ready(function(){
$('button').bind('click', function(){
//close any open areas
$('.area').each(function(){
if($(this).data('state') == 'open'){
$(this).animate({'height': 0}, 750, function(){
$(this).data('state', 'closed');
});
}
});
//retrieve the div we need to toggle and it's state
var divID = $(this).data('bound'),
div = $('#' + divID),
state = div.data('state');
//animate the div based on it's state, then set the new state
if(state == 'closed'){
div.animate({'height': 100}, 750, function(){
div.data('state', 'open');
});
}else{
div.animate({'height': 0}, 750, function(){
div.data('state', 'closed');
});
}
});
//init
$('#btnLogin').trigger('click');
});

slide up jumps to top of page

I have some jQuery accordion sliders that slide down and slide up when clicked to reveal content.
Everything works as it should, but if you click on the same link to slide up the same content, it will jump to the top of the page.
I have
return false;
to prevent it jumping to the top of the page when another slider is clicked, so not too sure on what to use so that it doesn't jump to the top of the page to slide up the same content.
I've tied to add
event.preventDefault();
which works, but it breaks in IE9 and IE8.
Here's what I have:
$(document).ready(function() {
$('.slider').click(function() {
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
return false;
}
});
$('.internal').hide();
});
HTML Sample:
<div class="slider">Slide Link 1</div>
<div class="internal">
Stuff1
</div>
<div class="slider">Slide Link 2</div>
<div class="internal">
Stuff2
</div>

You are going to want to prevent the default action of the click event. try this:
$(document).ready(function() {
$('.slider').click(function(e) {
e.preventDefault();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
return false;
}
});
$('.internal').hide();
});

the links probably have anchor tags like <a href="#" ...>, try to remove href="#" and if you still want that looks like a link with pointer cursor, use css:
a{
cursor: pointer;
}

Best approach to slideup and tabs with jQuery

I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>

The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc

I think this is a great example of what your looking for: Organic Tabs

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).