Develop Reference

How can I keep mega sub menu open after mouse leaves top navigation button?

I am new to jQuery. I am trying to set up a mega drop down that is 100% width on the screen but the content is centered. Also the top navigation buttons are centered.
How can I keep the sub content area open after the mouse leaves the top button?
Here is the fiddle: http://jsfiddle.net/uf1107qs/
$('.top1').on('mouseenter', function () {
$('.sub1').slideDown(200).addClass('.abTop');
$('.fades1').delay(50).fadeIn(200);
});
$('.top1').on('mouseleave', function () {
$('.sub1').delay(600).slideUp(200).removeClass('.abTop');
$('.fades1').fadeOut(0);
});

did you want the .subX and .fades1 keep showing and never closed?
perhaps this is this what you want?
JSFIDDLE
Edit :
sorry for my misunderstanding before. You can achieve that by using setTimeout rather than delay, here's the result : JSFIDDLE, it's still ugly though, because there are many repeated code inside it.
Basically you need to setTimeout when mouseleave the top, and clearTimeout when mouseenter the top or sub
Other Way :
the other way around to achieve it, you can use only CSS by using CSS property like position, visibilty, opacity, z-index like in this example on JSFIDDLE

Instead of using delay, or a timeout.. you can use what's called a callback function, which is supported by most jQuery built-in functions. This is your code:
$('.top1').on('mouseenter', function () {
$('.sub1').slideDown(200).addClass('.abTop');
$('.fades1').delay(50).fadeIn(200);
});
Here is my version using the concept of a "callback":
$('.top1').on('mouseenter', function () {
//see the difference?
$('.sub1').slideDown(200, function(){
$('.fades1').fadeIn(200);
}).addClass('.abTop');
});
Essentially what is happening, is that slideDown() is able to accept an optional parameter that is function. This function will then get triggered only AFTER 200ms have passed (Since you have it set to slideDown(200)).
So callback function in this case, is simple a function that is called, only after the parent function (for simplicity sake) is done doing what it's supposed to do. For more info:
http://www.w3schools.com/jquery/jquery_callback.asp
ALSO
Since you are new to jQuery, you should definitely check out the hover() function. You will be able to simplify your code by probably half the amount of JS lines, and be much more readable!
http://api.jquery.com/hover/

Reverse onClick Event

I am a genuine javascript novice and looking some pointers in my learning - not homework nor is it anything commercial.
I have a function here which shows an element which is hidden due to the first 2 lines of the function. I start by clicking the heading and the 2 hidden divs appear, which is exactly what I wanted to happen. However, now when I use this second function, it won't return to it's windown onload state. Why is this? Is there a better way to achieve this?
1st Function
$(window).ready(function(){
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
$(".heading").click(function(){
$('.miniC').slideDown();
$('.miniI').slideDown();
$('.miniC').show();
$('.miniI').show();
});
});
2nd Function (Reverse)
$(window).ready(function(){
$(".hideOut").click(function(){
$('.miniC').slideUp();
$('.miniI').slideUp();
$('.miniC').hide();
$('.miniI').hide();
});
});
Thanks in advance and any reference to good reading material is appreciated.
* Corrected Missing closing quote - this was a mistake of me typing it into Stack Overflow - Sorry! *

It seems like you want to toggle the visibility of an element, and since you're already sliding it, why not just use slideToggle:
$(".miniC").css("display", "none");
$(".miniI").css("display", "none");
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});
Example

You shouldn't need to call .hide() and .show() - they will be dealt with as part of the slide functions. However, you're calling them immediately after the slide, but that takes a while to complete (400ms by default) meaning that .hide() fires before .slideUp() completes.

Outside the question scope, but still applicable.
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
This part of the page functionality should probably in CSS, which will result in the browser rendering the initial paint of the page correctly. In your case the browser paints the "miniC" and "miniI" elements, then your jQuery code updates the CSS display property to "none" for both individually. Triggering two additional repaints of the page. So, basically with the jQuery code you are drawing the page three times for an effect that could achieved with a single paint.
Then like Charlie said add a listener for the click.
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});

Because slideUp() and hide() are written inside the click event. So, it wont fire on window ready, but only onclick of $(".hideOut").

There is a typo in your first function.
a single quote is missing in the line:
$('.miniC).show();

Toggling one thing with two different elements

In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?

You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});

I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.

slideUp() and slideDown() not working inside .delegate()

I am developing a website using JQM. I have dynamically created a collapsible via AJAX data. Now, I want to make the collapsible slideup and down smoothly (JQuery mobile). The problem is .delegate function is getting executed, but its using the default sliding speed and not changing. My code is :
$('#search-page').delegate('.menu-collapse','expand', function (event) {
$(this).children().slideDown(300);
}).delegate('.menu-collapse','collapse', function (event) {
$(this).children().next().slideUp(300);
event.stopPropagation();
});
I think some problem with $(this). Can anyone sort it out ? Thanks in Advance.

try , thats work exactly as you want now
$(document).on('pageinit',function(event){
$('[data-role="collapsible"]').bind('expand', function (event) {
$(this).find('.ui-collapsible-content')
.css('display','none')
.slideDown(300, function(){
$(this).css('display','block');
});
}).bind('collapse', function (event) {
$(this).find('.ui-collapsible-content.ui-collapsible-content-collapsed')
.slideUp(300);
});
});
FIDDLE HERE

I think, you need to find way, how you can animate collapsible set, not why delegate not working
see questions like this, and try it out.
But i can't repeat this, because it's bit different.

JQuery - how to attach a method to the 2nd state in an event that has no states?

I'm using the premade .slideToggle method in JQuery
I want to add an object to the .slideDown state of .slideToggle. ie) When I click a button I want to bind that object to the .slideDown event and 'close' it. However I obviously cannot just .add the object to .slideToggle. Is there a way to specifically target the slideDown state? Or do I have to utilize .slideUp and .slideDown if I want the privilege of specificity?
Obviously .slideToggle is another super easy JQuery "let's look like magic while we cache all the if{s and all the rest into one big variable".

I believe you'll have to give up using .slideToggle() but you can still use the convenience of .toggle()
$('#some-element').toggle(function() {
// put slideDown here, along with anything else that should accompany it
}, function() {
// put slideUp here, etc.
});

You could always do like this. It's not better than #Justin Ward's way. But it works
$("#some-element").slideToggle(function(){
if ($(this).is(":visible")) {
// Do something (showing)
} else {
// Do something (not showing)
}
});