Develop Reference

How to hide a div on click of another dropdown link?

I have a bootstrap navigation menu where I have also added a search icon. The search icon shows up the search box on click. Added a toggle in the search icon to show and hide the search box.
Now, when I click on the search icon and it is it open state showing the search box and then I click on any one of the dropdown menu in the navigation menu the dropdown appears over the search box.
I need to close the search box once any other dropdown menu is clicked. I know its very simple but but not getting a proper solution. Can anyone suggest?
Here is the link of the code:
JSFiddle
$('.tablet-toggle a').click(function (e) {
if($('ul.dropdown-menu.tablet-toggle').css('display') == 'block'){
$('.desktop-search').hide();
}
});
$(".search-icon").click(function () {
$("#searchForm form").slideToggle("fast", function() {
// Animation complete.
});
});

Check this out, updated Fiddle:
http://jsfiddle.net/uw08ddmm/7/
$('a.dropdown-toggle').click(function (e) {
$('.desktop-search').toggle();
});

You may try the following code:
Hide the search form when any dropdown menu in the navbar is clicked.
$('.navbar a.dropdown-toggle').click(function (e) {
// Use slideUp here to consist the animation behavior with slideToggle
$('#searchForm form').slideUp('fast');
});

Have you tried this?
window.onload = function(){
$('.nav li.dropdown').click(function(){
$('.desktop-search').hide();
});
};

You may try this: This will close the search box if click happens any other place of the page but on search icon:
<script>
$(document).ready(function(){
$(document).on('click',function(){
$('.desktop-search').hide();
});
});
</script>
Make sure that on Search Box open event the following line should be written:
event.stopPropagation();

jQuery/ javascript after something has been clicked, then check for something else

I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.

You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html

You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");

How I can I get my grid to appear from a text box

I have a grid of buttons in my code where the user clicks on the word "click here" and the grid of buttons would be displayed. This uses jquery, what I want to know is that does anyone know a way so that the user can click on a text box and what happens is that the grid of buttons appear and if the user clicks on a button or clicks away from the grid, the grid disappear again. In other words I want it to work exactly how the Jquery datepicker works (to see the datepciker jquery please click here
To see my code then it is in jsfiddle, click here

Try this:
UPDATED
$('#showGrid').click(function(e) {
if ($('#gridone').css("display") == "table") {
$('#gridone').hide();
}
else {
$('#gridone').css("display", "table");
}
e.stopPropagation();
});
$("body").click(function() {
$('#gridone').hide();
});
$('#gridone input').click(function(){
$('.box INPUT').val($('.box INPUT').val() + $(this).val() );
$('#gridone').hide();
});
Example fiddle

jquery create a tooltip that does not disappear

I am looking to build a tooltip that allows the user to click links within that tooltip to allow them to navigate to various sections of the site. My problem is that the tooltip disappears when I leave the a with my mouse? what I want is for the tool tip to disappear if I change to a new a or click close on the tooltip, my jquery is as below currently,
$(document).ready(function() {
/*
* Rollover jobwall logo and show job tooltip
*/
$('ul#jobs li a').mouseenter(function(){
var $this = $(this);
$this.addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
//alert($this);
$this.tooltip({ effect: 'slide'});
}
});
}).mouseleave(function(){
$(this).removeClass
$('#tooltip').remove();
});
});
How can I make it so that the tooltip appears on mouse enter of an a button only disappear when the user closes it through clicking a close button, or moving to a new a allowing the user to actually enter the tooltip without it disappearing.

I would look at hoverintent instead of mouseenter and mouseleave.
On the mouse leave event, you need to check to see if the mouse is located in the tooltip. If not, you can close it.

Moving $('#tooltip').remove(); to the top of the mouseenter function should do the trick. This will not remove the tooltip when the mouse leaves and will remove it if it exists when a new a is entered.
This assumes that 1) you already have a close function and 2) $('.active').append(html); creates #tooltip.
As commented by Chris though, this may be frustrating for users.

JS Drop Down menu with submit button

I need to implement a drop down menu like the one in the image. I know how to accomplish something like this when there is no 'go' button but how would I do this with the the 'go' button? Is there a way to allow the user to select a link but not trigger it unless the user clicks the go button? Is there a jquery plugin or something for this kind of behavior?
Im not very good with JS, so sample snippets to illustrate your suggestions will go a long way to helping me understand - thanks!

You can prevent the default behavior of the links, like this:
$(document).ready(function() {
$("#menu a").click(function(event) {
event.preventDefault();
});
});
So the user won't be redirected when choosing the link, but won't break that behavior in case he wants to open it in a new tab/window, which is cool.
And for redirecting the user when he clicks, you can just attach an event to the GO button which finds the selected a, takes its href, and set the current location to it's value.

You could do something like this:
$("#menu a").click(function(event) {
$("#menu a").removeClass('selected');
$(this).addClass('selected');
return false;
});
Then:
$("#buttonid").click(function(event) {
window.location.href = $("#menu a.selected").attr('href');
});