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.

Onclick should close other opened element

I do have 2 elements in my page which i want to show them when user clicks on 2 different buttons.
Here is my code
$('.social-toggle').on('click', function() {
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$(this).next().toggleClass('open-menu');
});
When user clicks on the first button, the first element will be show up, but i want either user clicks on the second button or one of the links in the opened-menu the first opened menu be closed.
JSFIDDLE

You do not need to write two different event here. Use comma seprated multiple selector for targetting both button:
$('.social-toggle,.social-toggle1').on('click', function() {
$('.social-networks').not($(this).next()).removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
Working Demo

Here is the code what you want. You didnt removed the class which was applied previously.
$('.social-toggle').on('click', function() {
$('.social-toggle1').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$('.social-toggle').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});

Hidden Content and Jquery 2 Clicks to Fire

I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle

Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/

I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.

Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle

Checking div is hidden by other two buttons

I have three buttons on screen, only one of the three have a class called 'show_hide'. When 'show_hide' is called, it make a div show. However the other two buttons do not make reset show_hide to hidden.
How do I make the other two buttons reset the show_hide to hidden when they are pressed?
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".show_hide").hide();
});

Maybe you could had a class to your other button '.hideBtn' and catch the click to do the hide:
$(".hideBtn").click(function(){
$('.show_hide').hide();
})

Jquery .next() help

I use the following code to hide and show a box on a bunch of search results. Each result has its own toggle and box to show and hide. The problem I have is that clicking any one of the toggles will show and hide ALL of the boxes on the page and NOT just the box for the one result. How can I do this?
Thanks
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$("div.MoreResultsTrigger").next().slideToggle('fast');
});
});
UPDATED CODE USING HOVER
$('a.MoreResultsTrigger').hover(
function () {
$(this).next().show();
},
function () {
$(this).next().hide();
}
);

Use the this keyword since you only want to hide the element next to the one you're clicking on.
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
});

untested but try:
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});

use $(this).next().slideToggle('fast'); that will apply it to ONLY the one you have selected. At the moment its applying the slideToggle to ALL div.MoreResultsTrigger's.

Try this:
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function()
{
$(this).next('.toggleable').slideToggle('fast');
});
});
The addition of the '.toggleable' class to the .next() is just in case you might have other things in between that you don't want to toggle. You would of course have to add the .toggleable class to all elements that you're interested in toggling. Of course, you can replace, and should, replace toggleable with a name that has more meaning.