We Keep Coding

jquery toggle that closes on scroll?

I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...
would that be possible? My jquery is pretty simple...
$(document).ready(function() {
$('.nav-toggle2').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Contact Us');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Contact Us <');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us <</tag>
<div id="contactus">some content that hides/shows here</div>
I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?

Based on your comments you said you haven't tried listening to the scroll event. Can you try that?
It will be something like this (code not tested):
$(window).on("scroll", function(){
// you can replace this with your hiding toggle logic
$('.nav-toggle2').toggle('false');
});
You may want to unbind the event from the window later to avoid memory leak.
Reference about scroll: Jquery scroll api

Multiple Toggle. / Hide Show / Close others while open

Still a noob when it comes to this part of programming. I have a question regarading something I "solved" with the toggle function. I have 3 buttons ( placed in different divs on the page, so it's not a tab toggle ). What I try to achieve is when I have a button active and I click on another one, I want the active one to be closed. I looked up some jfiddle posts here with something similar, tried to implement it to the page and figure it out myself but nothing worked for me so far. The function I currently use for one button is
<script type="text/javascript">
$(function() {
$('#toggle5').click(function() {
$('.infotext').fadeToggle('fast');
return false;
});
});
</script>
It works just fine for one button to close and open it, but I have no idea where to start when I want two more buttons and let them interact with each other as mentioned before. Anybody has an idea how to do that ? And is the toggle function even the right function here ? I'd like to thank in advance for what ever answer I get here, great community.

Here is a good fiddle.
$("a").click(function(e) {
var tClass = $(this).attr("id"),
content = $("div.content." + tClass),
link = $(this);
$("div.content:not('." + tClass + "')").fadeOut("fast");
$("a").not(link).text("Open");
content.fadeToggle("fast", function() {
link.hide().text((content.is(":visible") ? "Close" : "Open")).fadeIn("fast");
});
e.preventDefault();
});​

If by closed you mean disabled then the code block bellow will do the trick.
Also, this will work only if your buttons are submit or button type.
<script type="text/javascript">
$(function() {
// click event for the #toggle5 button
$('#toggle5').click(function() {
// check if the #toggle6 is disabled
if ( !$('#toggle6').is(':disabled')) {
// if is not disabled, then disabled it
$('#toggle6').attr("disabled", "disabled");
}
return false;
});
});
</script>
If your buttons are links you will need to fire the preventDefault event
Docs here: http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
<script type="text/javascript">
$(function() {
// click event for the #toggle5 button
$('#toggle5').click(function() {
$('#toggle6').on("click",function(e){
// check if we hire the preventDefault event already
if(!e.isDefaultPrevented()
e.preventDefault();
});
return false;
});
});
</script>

This will allow multiple toggle elements. Click toggle first one to open. Click to open the second one and it will close the first one and then open the 2nd one. So forth and so on. Can also close toggles with a click without having to open another one.
The HTML Markup
<div class="toggle">See Stuff</div>
<div class="paragraph">
<p>Content</p>
<p>Content</p>
<p>Video</p>
<p>Image</p>
</div>
The jQuery
<script>
$('.paragraph').hide();
$('.toggle').click(function() {
var panel = $(this).next()
$('.paragraph').not(panel).slideUp();
panel.slideToggle({
direction: "down"
}, 1000);
});
</script>

Handle Conflicts Between Document Click and Element Click

So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.
This is the dropdown code:
function dropdown(){
$('#smenubutton').click(function(e){
var submenu = $(this).find('.submenu');
if (submenu.is(':visible')){
submenu.hide();
}else{
submenu.show();
}
});
}
however, a code like this:
$(document).click(function(e){
e.stopPropagation();
$('.submenu').hide();
});
will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can't find any questions based on my needs) and close this question.

You should check if e.target is the submenu and hide the submenu only if it's not (in this case i check if it has the class submenu)
$(document).click(function(e){
if($(e.target).hasClass("submenu")){
$('.submenu').hide();
}
});

Since you mentioned "outside the browser", try this: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
EDIT: Since OP edited the question, I'll edit the answer:
$(document).on('click', '#submenu', function(e) {
e.stopPropagation();
// show or hide the submenu here
});
$(document).on('click', function(e) {
// hide submenu here
});
example: http://jsfiddle.net/A3SfP/

Try on blur() or focusout():
$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });
If it doesn't work try giving your menu an explicit tabindex.

Jquery hover vs. click expandable menu

A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.

Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();

The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}

how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus

Try using the onblur event.

I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});​​
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});​
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.

I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div

Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"