We Keep Coding

Remove Subnav Dropdown from WordPress Menu with Jquery

Ive wrote some Jquery to work on tables & Desktop which drops down with a hover or a click - it almost works great except it doesn't return (go back up) once dropped down.
Would it be correct to use a mouse leave on the following code to change display to hidden?
Here is the code I have wrote:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(
function(){$(this).click();
}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide();
}
$('ul.sub-menu', this).show();
}
);
})
I also have this in Codepen to show better:
http://codepen.io/anon/pen/jPbJMJ
Thank you

I managed to do this by changing the following:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide(); }
$('ul.sub-menu', this).show();
$("#menu-main-menu").mouseleave(function(){
$("ul.sub-menu").hide();
});
}
);
})
As you can see I used the mouseleave function in Jquery to remove the ul.sub-menu if the #menu-main-menu div was not selected with the mouse.
I hope this helps anyone trying to write a WordPress dropdown Sub navigation menu

Using button on collapsed Bootstrap navbar to toggle display of a specific div hidden with class="hidden-xs"

I have a complex search form that I want to hide by default on mobile browsers, instead displaying an icon in the navbar that toggles its display.
The div containing the search form is hidden by default on mobiles using class="hidden-xs"
What I wanted to do was have $("#search").fadeToggle() but this doesn't do the trick, in fact it doesn't appear to do anything.
Instead I am partly there by using $("#search").removeClass('hidden-xs') but this obviously doesn't toggle, or give a fade effect. Am I missing something obvious? The search form is quite complex and I do not want it to be displayed in the navbar even on large screens.
jsfiddle - http://jsfiddle.net/ZNUBx/1/

You can do it with this :
fiddle : http://jsfiddle.net/ZNUBx/2/
JS :
$("#search-button").click( function(){
$("#search").removeClass('hidden-xs').stop().hide().fadeIn();
});
Update: [asker demand][see comment] with hide event
jsfiddle : http://jsfiddle.net/ZNUBx/3
Js:
$("#search-button").on('click', function(){
if( $("#search").hasClass('hidden-xs') )
{
$("#search").removeClass('hidden-xs').hide().fadeToggle();
} else {
$("#search").addClass('hidden-xs');
}
});

Javascript not working - 2 different div containers

I am struggling with trying to make a link in a separate div container open a panel in a completely different div container (which if you click on the second div containers link, the panel also opens and the link itself has an active state) - I got the part down where if I click on a link in the first div container, the panel opens up from the second div container, but am struggling with making that first div containers link activate the active state in the second div container...
If you take a look at the demo, simply click on the {Ñا} Members tab, as the other 2 are inactive atm...Once you click on that tab, a panel opens (not the one I am talking about though), now that; that panel is open, look at the very bottom, on the left side in the div container that holds the info title: "Official Roster", there is a link in there that says "rank", if you click on that specific link, the O.F. panel opens up like it should, however, the active state selects them all rather than just the 1 that is selected...I'm getting close, but am seriously stuck and can't seem to figure it out...
Demo: http://jsfiddle.net/Djdzw/2/
I believe it is pure javascript that would be needed, however, it could also be the css as well. I'll provide what code I have atm below, however - I'll only provide the javascript since posting all the code that is required would simply be too much...So, if you could simply take a look at the demo above, it might be easier on the eyes ;)
JAVASCRIPT:
/* ===== The section below is what needs to be edited ===== */
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a').addClass('active');
});

Did you mean this?
$('.info_box p a').click(function () {
var id = this.id; //get the id of the clicked item
var a = $('#profile_list a[href="#' + id +'"]'); //construct the selector to select the menu item which has the same href
$('#profile_list a').not(a.addClass('active')).removeClass('active'); //now do the add/remove class
});
Fiddle

I did this and it worked. I hope it is what you're looking for:
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a.panel[href=' + $(this).attr('href') + ']').addClass('active');
});
jsFiddle

jQuery - How do I have an accordian li open when I am in a specific path?

I have built a simple accordian style menu. It works, but I would like it to have a specific section toggled open when in a path related to that menu. So if I would be in the "Mens" part of the clothing store, the Mens section of the menu with the child would be visible or toggled. Right now you can click and toggle open each section, but they are all closed when the page first loads. The website section I am referring to is here: http://bemidjisports.designangler.com/men The menu is on the left side.
I assume it has something to do with the jQuery .toggle() method, but I am not sure. Could someone give me an example of this based on the code below?
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(e) {
e.preventDefault();
$(this).siblings("ul").slideToggle("fast");
});
});
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(f) {
var href = this.href;
window.location = href;
});
});
$(document).ready(function() {
$("#nav_1489829 li.selected").ready(function(g) {
$("li.selected").toggle();
});
});

Try
$("#nav_1489829 li.selected a").trigger('click');

Changing Jquery vertical tabs to menu

Referring from
http://mehdi.biz/blog/2010/02/05/vertical-tabs-for-jquery-lovers/
i know it's very easy but i couldn't able to find a solution..
Just want to hide panel(content) when users move their mouse out from that icons.(Acting like a menu not like tabs don't want an active tab.)
How can i add that jquery code?
var $items3 = $('#vtab>ul>li');
$items3.mouseleave(function()
{
$('#vtab>div').hide();
}).mouseleave();
tried that code..it hides the tabs so i cant visit content of panel..
Ex: http://arkansas.gov/
panel at right side

You are triggering the mouseleave right after you have attached it. Why?
Instead of the javascript on vertical-tabs and yours use this:
Add display: none; to #vtab > div in the css.
var $items = $('#vtab>ul>li');
var $contents = $('#vtab>div');
$items.on('mouseenter', function() {
$items.removeClass('selected');
$(this).addClass('selected');
$contents.hide();
var index = $items.index($(this));
$contents.eq(index).show();
});
$('#vtab').on('mouseleave', function(){
$items.removeClass('selected');
$contents.hide();
});
try it here.
This will only display the tab content and select the tab on mouseenter and hide the content and de-select the tab on mouseleave.