Develop Reference

responsive submenu open on click not working

I have converted my first HTML to WordPress website and have a responsive sub menu which is not opening properly on mobile because obviously there is no hover functionality. I have looked up solutions and have come to nothing as my JavaScript knowledge is non existent therefore copying and pasting code from examples on here is not getting me the result I want to achieve.
The menu I am trying to fix is on the following website:
https://www.piogroup.in/wordpress/
I have 2 parents which are "about" and "products" and they are not clickable links. So far I have tried the following code:
$(document).ready(function(){
$("#menu-item-74").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
$(document).ready(function(){
$("#menu-item-72").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
and then added this as well:
var $handle = $('.sub-menu').prev();
var opened = 0;
$handle.on('click', function(e){
if (opened) {
window.location.href = $(this).attr('href');
} else {
e.preventDefault();
e.stopPropagation();
$('.sub-menu').slideToggle();
opened = 1;
}
});
$('html').on('click', function(){
if (opened) {
$('.sub-menu').slideToggle();
opened = 0;
}
});
I am not sure if I am meant to put up any other files but can do so.

#R Alexander if I understand you correctly, Your sub menu is not working on mobile devices. Below code may be help you out.
minWidth = $(window).width();
if(winWidth < 768){
$(".menu-main-menu-container li").click(function(){
$(".menu-main-menu-container li ul").slideToggle();
$(".menu-main-menu-container li ul").parent().siblings().children(".menu-main-menu-container li ul").slideUp();
});
}

I went through your code and there are some logical inconsistencies.
First of all you should change this as follows:
var $handle = $('.sub-menu').prev();
var opened = 0;
$handle.on('click', function(e) {
if (opened) {
window.location.href = $(this).attr('href');
} else {
e.preventDefault();
e.stopPropagation();
$(this).next().slideToggle();
opened = 1;
}
});
This makes the particular clicked element to slideToggle instead of all the .sub-menu elements.
Then to emulate the closing of the drop downs use this:
$('html').on('click', function() {
if (opened) {
$('.sub-menu').slideUp();
opened = 0;
}
});

Getting left nav link to stay open and active

Currently I have a left nav menu that works:
$('.navContainer li div').click(function () {
var $t = $(this);
var $next = $t.next('.navtoggle');
$('.navtoggle').not($next).slideUp('active');
$next.slideToggle(400);
});
The problem is, the links on the last level need to be highlighted based on the page that is on and for the nav to stay open. The script above, once clicked, will load the corresponding page and close the navigation. I have tried using the cookies and couldn't get it to work. I've tried using document ready, and it works until the page reloads and it just resets. So I am kinda stuck. I've tried:
$(document).ready(function () {
$('.navContainer .navtoggle li a').click(function (e) {
$(e.target).addClass('current');
});
});
.navContainer .navtoggle li a, is the last links to be used to keep it activated. I'm adding class 'current' since active is being used in the navigation. This will change the link color and thats it. I've also tried a:target and a:active, but everything just keeps getting reset.

I was able to find an answer here http://www.itworld.com/article/2832973/development/setting-an-active-menu-item-based-on-the-current-url-with-jquery.html and change a couple things to make this work. Wanted to give most of the credit to that webpage but I was able to make it work using this as the base. The final code is:
$(function () {
setNavigation(); });
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".navContainer .navtoggle li a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li a').addClass('current');
$(this).closest('.navtoggle').css('display', 'block');
}
}); }

Helping to create style similar to accordian - jquery

I am currently implementing a set of tabs similar to the style of an accordian.
This is my code so far...
http://codepen.io/anon/pen/uqBnH
I am having trouble closing the others when one is selected.
My jQuery code...
$(function(){
$('.panel').hide();
$('.mobtabs').click(function(){
$(this).next().toggle();
});
});
Any help would be greatly appreciated.

Just toggle the others shut with:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
$('.mobtabs').not($(this)).next().hide();
$(this).next().toggle();
});
});
jsFiddle example

You can use:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
var nextPanel = $(this).next();
$('.panel').not(nextPanel).hide();
nextPanel.toggle();
});
});
Fiddle Demo

Make the following changes (I added the sliding) -
$('.panel').hide();
$('.mobtabs').click(function(){
$('.mobtabs').not( $(this) ).next().slideUp(); // close them all
$(this).next().slideToggle(); // slide open (or closed if it applies) this tab
});

jQuery - Tabbed Content - Open on Selected Tab?

I've created some tabbed content. Is there any way for me to decide which tab I want open by changing the URL? I'm sure I've seen something similar before but can't find it!
I've created a fiddle here: http://jsfiddle.net/sW966/
The default tab is tab 1. But for example, if the URL was http://jsfiddle.net/sW966/#tab-2 the page would load with tab 2 open?
Thanks for any help, struggling a little :)
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("href")).show();
});
});

Why not change your JS to:
Note this wont work in jsfiddle due to the way it works.
$(document).ready(function () {
if(window.location.hash){
tabChange($('.tab[href=#'+window.location.hash+']'));
}
function tabChange(tab){
$(".tab").removeClass("active");
tab.addClass("active");
$("#tabbed-content .tab-content").hide();
$(tab.attr("href")).show();
}
$(".tab").click(function () {
tabChange($(this));
});
});

You can try this:
Working fiddle here
Replace attribute "href" to "name"..
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("name")).show();
});
});
Good Luck....

JS Dropdown menu not closing?

So I found this fiddle here: http://jsfiddle.net/8qPvp/4/
I thought I'd use it just for personal education purposes.
I'm really new with JS, and I noticed that the opened parent does not go back on click, like it opens. How could this be fixed?
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});

What about this:
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
$(document).click(function()
{
$('li > ul:visible').hide();
})
$('.menu li').click(function(e)
{
e.stopPropagation();
})
So by default i make whenever there is clicked ANYWHERE in the document, your visible menu will be hidden. However you don't want this to happen when you open a new menu(would be; made visible and made hiden directly). So i make a exception that catch when you want to open a new menu and i'll cancel the document click event.I use event.stopPropagation() to cancel a event.
jsFiddle

$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
}).mouseleave(function(){
$(this).children("ul").hide();
});
});
Check this fiddle http://jsfiddle.net/Aveendra/8qPvp/18/