Develop Reference

on click call hover/mouse

I have fixed sidebar navigation bar, it works on hover but I want to open first menu by clicking on collapse button. similar working like hover on menu 1. I have already tried following methods .
jsfiddle Demo
$(document).on('click', '.btn1', function () {
console.log('btn 1');
//$('.imFirst a').trigger('mouseenter');
//$('.imFirst a').trigger('mouseover');
//$('.imFirst a').trigger('hover');
$('.imFirst a ').mouseenter()
//$('.imFirst a ').mouseover()
$('.imFirst a').toggleClass('hover');
});
$(document).on('click', '.btn2', function () {
console.log('btn 2');
//$('.imFirst ').trigger('mouseenter');
//$('.imFirst ').trigger('hover');
//$('.imFirst ').trigger('mouseover');
$('.imFirst ').mouseenter();
//$('.imFirst ').mouseover();
$('.imFirst ').toggleClass('hover');
});

You must add class, to rember your condition. I am change your example
jsfiddle Demo
$(document).on('click', '.btn2', function () {
$('.imFirst').addClass('active');
});

Like the previous answer I think your best bet is to add a class that is toggled when you click on the toggle button. The only difference with the previous answer is in the jsfiddle demo it works much better to add
$('.imFirst').toggleClass('active');
so you are able to close the menu after opening it.
My rep is too low to add this as a comment.

show / hide menu on button click

I'm new to jQuery and am trying to make a menu for a catering business and figured using jQuery would be the easiest way to implement what I am trying to do.
There is a catering menu and a dessert menu, I want to have them both hidden when the page loads but when a button, either catering or dessert, is clicked, show the appropriate menu. i can get it to hide them, but not sure how to get them show show on the button press.
Thanks!
var $cateringMenu = $("#cateringMenu");
var $cateringButton = $("#cateringButton");
var $dessertButton = $("#dessertButton");
var $dessertMenu = $("#dessertMenu");
function hideMenu(){
$cateringMenu.hide();
}
function showCateringMenu(){
if($cateringButton.click() ){
$cateringMenu.show();
}
}
hideMenu();
showCateringMenu();

Check out the documentation for the jQuery click method here: https://api.jquery.com/click/
This method will set up an event handler for the particular element. You can use it like this:
$cateringButton.click(function() {
$cateringMenu.show();
});
That will only cover half of the situations (when the menu is hidden). You'll have to add some additional logic that checks if the menu is hidden or shown and acts accordingly (or might want to check out the toggle method here: http://api.jquery.com/toggle/), but hopefully this is enough for you to continue!

Try it this way:
$(document).ready(function(){
$("#cateringMenu").hide();
$("#cateringButton").click(function(){
$("#cateringMenu").show();
});
});

The toggle() jQuery method was designed for exactly this:
jQuery:
<script>
$(document).ready(function(){
$("h1").click(function(){
$("p").toggle();
});
});
</script>
HTML:
<h1>Desert menu</h1>
<p>lots of deserts</p>
The documentation here explains its use pretty well. It takes care of the visibility checking you would otherwise have to do.

trouble using this script to make the button close by clicking outside

I'm trying to use the following script to make the button close its menu by clicking outside of it.
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});});
You can see the demo ([Ideal Fiddle])(http://jsfiddle.net/craigmdennis/H2Chj/2/)
But my button ([Problematic Fiddle]) (http://jsfiddle.net/xJ9ug/) isn't working that well. It takes a few clicks to open the menu. Would you please tell me what's wrong with the css or the script? Any help is much appreciated.

Check out this fiddle. All you need is a simple condition check to make this work.
if ($('#dropdown').has(e.target).length === 0)

actually your code is correct .. the reason why it is not working is it have <input type="checkbox" /> inside a span and click event is being added for span. I don't know the exact reason why checkbox is not let the event propogate but removing the checkbox works like a charm..
and yea one more thing you haven't closed first span tag properly.
working demo without checkbox HERE
use addClass() and removeClass() to acheive the effect you demo had.
thanks

Add .dropdown_content li a,its working now..
$(document).ready( function(){
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown_content li a').toggle();
});
});

Show only one element and hide others without toggle

I've been researching this and many of the answers involve toggle function. The problem is I want one elements to be shown at all time, which isn't possible if toggle is used (they may accidently click something and it disappears). So I was doing it this way:
$(document).ready(function(){
$("#goals").hide();
$("#History").addClass("selected");
$("#History").click(function(e){
e.preventDefault();
$("#history").show();
$("#goals").hide();
$("#History").addClass("selected");
$("#Goals").removeClass("selected");
});
$("#Goals").click(function(e){
e.preventDefault();
$("#goals").show();
$("#history").hide();
$("#Goals").addClass("selected");
$("#History").removeClass("selected");
});
});
Except it's prob too tedious and I'm sure there's a better way. I'm trying to find solutions that use hide and show only or if the requirement can be fulfilled. Any help is appreciated...I'm not advanced at jQuery yet so please provide explanation. Thank you

You can give them a class.. or just combine the them in one selector
$(document).ready(function(){
$("#goals").hide();
$("#History").addClass("selected");
var eles = $("#History,#Goals");
eles.click(function(e){
e.preventDefault();
$(this).show().addClass('selected'); // show and add class to current clicked
eles.not(this).hide().removeClass('selected'); // hide and remove class for the other one
});
});
EDIT: I didn't notice you actually had different id's
var hg = $("#history,#goals");
var HG = $("#History,#Goals");
HG.click(function(e){
e.preventDefault();
var el = $('#'+this.id.toLowerCase());
el.show();
hg.not(el).hide();
$(this).addClass("selected");
HG.not(this).removeClass("selected");
});

jQuery slideUp() content when clicked for a second time

How would I slideUp() the content only when '.areaCodeList' is clicked a second time?
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideDown();
($this.die());
$('.churchList').slideUp();
});

You should use slideToggle()
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideToggle();
});
Example

You may use some class to indicate it already clicked before running the code
$(".areaCodeList").on('click', function() {
if (!$(this).is('.clicked')){
$(this).addClass('clicked');
return false;
}
$(this).next('.churchList').slideDown();
$(this).die();
$('.churchList').slideUp();
});
You also may consider using attributes ($(el).attr('clicked')) instead of class and check for it later in a similar way.
Update:
The question title is really confusing and it seems that only many of us (answering the question) don't got it from the start:
Initially I got it like this:
Slide the element up if it clicked for the second time.
If it's the case than the sample I've provided is correct.
But it looks like the question is more like this:
Slide the element down on every even click and slide it up on every odd click.
If this is the case that slideToggle is the solution (as explained in epascarello's answer)

You can check if the .churchList is visible (slided down):
$(".areaCodeList").on('click', function() {
if( $(this).next('.churchList').is(':visible') === true){
$(this).next('.churchList').slideUp();
}else{
$(this).next('.churchList').slideDown();
}
});