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;
}
});

jQuery: click event can't work

I'm trying to change the area and the button value by clicking the different Tabs.
Here's my question:
First loading the page, the button effect is working, but after clicking the other Tabs, it can't work.
On clicking the second Tab, then clicking the area button, you'll find it can't work.
Here's part of my code:
$(document).ready(function () {
var _showTab = 0;
$('ul.tabs').each(function () {
$(this).find('li').each(function (k) {
if (k != 0) {
$($(this).find("a").attr("href")).hide();
} else {
$(this).addClass('active').append("<span class='tr_icon'></span>");
}
})
});
$('ul.tabs li').click(function () {
var $this = $(this),
_clickTab = $this.find('a').attr('href');
$this.addClass('active').append("<span class='tr_icon'></span>").siblings('.active').removeClass('active').children().remove('span');
// $(_clickTab).stop(false, true).fadeIn().siblings().hide();
paidChange();
areaChange();
return false;
}).find('a').focus(function () {
this.blur();
});
});
Here's all of my code:
Sorry for my poor English, and I hope you'll understand what I mean.

document.on click will trigger on dynamically added tabs.
Change
$('ul.tabs li').click(function() { });
to
$(document).on("click", 'ul.tabs li', function(){});

collapsible accordion return to active status

Need help guys im new to javascript, how can i make the status of collapsed icon to "+" again when i click the current tab to collapsed? my problem is the "-" current tab has that sign whenever i close the tab again, here's the code and the sample link: http://www.dev.redefinegraphicstudio.com/acp/SLOCPI%20Mobile/HOMEPAGE.html
$(document).ready(function(){
$('.expand-collapse-menu > li > a').on('click', function(){
var $this = $(this);
if($this.parent().hasClass('current')){
$this.parent().parent().find('ul').stop().slideUp();
}else{
$this.parent().parent().find('li').each(function(){ $(this).removeClass('active'); })
$this.parent().parent().find('ul').stop().slideUp();
$this.parent().toggleClass('active');
$this.parent().find('ul').stop().slideToggle(500);
}
});
$(".tabs-menu").find('li').each(function(){
if($(this).hasClass('current')){
var tab = $(this).find('a').attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
}
});
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});

The problem is your first function, when you change it to
$('.expand-collapse-menu > li > a').on('click', function () {
var $this = $(this);
if ($this.parent().hasClass('active')) { // change to active instead of current
$this.parent().toggleClass('active'); // add this line
$this.parent().parent().find('ul').stop().slideUp();
} else {
$this.parent().parent().find('li').each(function () {
$(this).removeClass('active');
});
$this.parent().parent().find('ul').stop().slideUp();
$this.parent().toggleClass('active');
$this.parent().find('ul').stop().slideToggle(500);
}
});
the class active that sets the background color to orange and the minus sign as background image will also be toggled for the active element. You could also remove the $this.parent().toggleClass('active'); from the if and else clauses and set it below as it should be toggled anyway.
As mentioned in the comments, if you want to keep changing the class of the clicked element in the if and else clauses, you can also consider to use addClass("active") and removeClass("active") instead of toggleClass("active") as it's known if the class should be added or removed.
I've set up a Fiddle with the relevant part from your page.

Add class to several elements

I have a cloned element and I want it so if I add a class to one of them it checks for active removes is and adds it to this and translates to the other. Here's what I'm working with:
$(document).ready(function() {
$("li").click(function(){
/*Here I want to add something like var active = $(.clonedelement + this, this)
but that does probably not makes sense, so what should i do? */
var active = $(this)
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
active.addClass("active");
}
});
});
Right now, it removes the current active from both, not does only add class to one.
I made a jsfiddle of it
http://jsfiddle.net/pintu31/8BxuE/
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
Header = $("#headerny", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
Header.addClass("floatingHeader");
} else {
Header.removeClass("floatingHeader");
};
});
}
// DOM Ready
$(function() {
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});

If you just need to highlight the clicked element with the class of active, and remove all others then try this:
$("li").click(function(){
$("li").removeClass("active");
$(this).addClass("active");
});
You don't really need to check if either this, or others already have the class, simply steamroller to 'active' class off all the others and add it to the one that's been clicked

try this
demo updated 1
demo updated 2 //with clone(true)
demo updated 3 //with clone(false) - default
demo updated 4
$(document).ready(function() {
$(document).on('click', 'li', function(){
var ind = $(this).index();
$('li').removeClass('active');
$('li').eq(ind).addClass('active');
$('#header1').empty();
$('#header').find('ul').clone(true).appendTo( '#header1' );
});
});

$(document).ready(function() {
$("li").click(function(){
$("li").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
});

Nav/Subnav list, how to give clicked item active class after reload of page

I have a couple nested & hidden sub-nav lists
<ul class="nav">
<li>Home</li>
<li><a class="profile" href="#">Profile</a>
<ul id="profile">
<li>Company</li>
<li>Structure</li>
<li>Team</li>
</ul>
</li>
<li><a class="projects" href="#">Projects</a>
<ul id="projects">
<li>Chapter</li>
<li>Pblc Trde</li>
<li>Globe</li>
<li>Komforte</li>
</ul>
</li>
I am currently using some jQuery i found online to show/hide the sub-nav upon click. What I am trying to accomplish is:
Hopefully clean up the show/hide click function of the sub-nab menus.
When clicking on the sub-nav menu items, the corresponding page that opens, needs to have the sub-nav expanded and give the corresponding menu item active class, so as to let the user know which page they are on.
I am hoping to do this purely in JS/jQuery. The installation of the site will be in WordPress.
$(document).ready(function () {
$(".profile").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("#profile").hide();
$(this).attr('id', '0');
} else {
$("#profile").show();
$(this).attr('id', '1');
}
});
//Mouse click on nav
$("#profile").mouseup(function () {});
//Document Click
$(document).mouseup(function () {
$("#profile").hide();
$(".profile").attr('id', '');
});
$(".projects").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("#projects").hide();
$(this).attr('id', '0');
} else {
$("#projects").show();
$(this).attr('id', '1');
}
});
//Mouse click on nav
$("#projects").mouseup(function () {});
//Document Click
$(document).mouseup(function () {
$("#projects").hide();
$(".projects").attr('id', '');
});
});
window.onload = function () {
$("ul#profile li:first").addClass("active");
};
$(document).ready(function () {
$("ul#profile").show()
});

$(document).ready(function()
{
// Get the name of the page. Split the URL at the '/':s and get the last part
// with pop():
var pageName = (location.pathname).split('/').pop();
// If we couldn't get a page name, default to index.html:
if( pageName == '' )
{
pageName = 'index.html';
}
// Hide ul:s that are children of the navigation:
$('.nav ul').hide();
// Event handler for clicks on navigation links:
$('.nav a').on('click', function()
{
// Change visibility for the first ul-child of the current li.
// $(this) refers to the clicked element.
$(this).parent('li').find('ul').first().toggle();
// Hide other sub-menus:
$(this).parents('li').siblings('li').children('ul').hide();
});
// Search through all link elements in the nav menu:
$('.nav').find('a').each(function(index, value)
{
// Append a '$' to the pagename to make the match()-function search
// from the end of the href value:
pageName += '$';
if( value.href.match(pageName))
{
// If the pagename matches the href-attribute, then add the 'active'
// class to the parent li, and show parent ul:s:
$(this).parent('li').addClass('active').parents('ul').show();
}
});
});

You could use a Cookie to hold the value of the currently open menu. This will allow for the value to be saved/retrieved between page loads and browser sessions.
As you've already got jQuery setup you can use the jQuery Cookie plugin to simplify things.
The code for it is quite simple (more examples on plugin page).
$.cookie('open_menu', 'projects'); //Save 'projects' under 'open_menu'
$.cookie('open_menu') //Returns 'projects'
Just check the value on page load and save it when one of the menu's is clicked.
If you'd prefer not to add any extra plugins here's some documentation on JavaScript's inbuilt cookie API.
Edit: I've created a JSFiddle with an example for you. The Cookie code doesn't seem to work in there sandbox, but the code should work for you, let me know if you have any troubles.
$(window).load(function() {
if ($.cookie('show_menu') !== undefined) {
$('#' + $.cookie('show_menu')).click();
}
$('.nav > li > ul').each(function () {
//Hide the sub lists
$(this).hide();
//Get link with same ID as Class
var id = $(this).attr('id');
//When link is clicked
$('.' + id).click(function () {
//Get the sub list
var list = $('#' + $(this).attr('class'));
//Check if it's currently visible
if (list.is(':visible')) {
list.hide(); //Hide list
$.cookie('show_menu', ''); //Unset open menu
} else {
$('.nav > li > ul').hide(); //Hide all other lists
list.show(); //Show list
$.cookie('show_menu', list.attr('class')); //Set open menu
}
});
});
});