Develop Reference

Click event prevents mouseout from triggering

FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
EDIT: I found where the bug is coming from you can see an example here. When you click on lets say the About tab and hover over and out on contact the content should be hidden. But you go back to hover over About and out the content stays visible, which is not. How do I ensure the mouseout event is being triggered after clicked?
EDIT 2: So I noticed the unbind() method prevents that. When I remove it I can't seem to get the content area to stay active when clicked as the mouseout method overrides it.
I did some research on this but could not find a solution as to why on hover the removeclass does not work. I have encountered a bug with addClass() and removeClass() functions. The thing is I have those function firing on hover or mouseover/mouseout and on click so it gets a bit confusing. Here is a demo of what I'm working with: JSFiddle.
Full screen for better view.
My JavaScript can be kind of messy but ultimately the way this is suppose to work:
1. If you hover over a dot on the map the content on the left red box should reveal what's relevant to the location as well as a 'tooltip' of the location name. (this part works)
2. You mouse out it's suppose to go back to the list of locations and the tooltip disappears. Almost like a reset.
3. Now if you click on the dot, both the tooltip and the content on the left should remain active. Until you either click on the "Back to the list" link on the red box or hover over the other dots. (this also works)
The bug I encountered is if you click around the list panel and hover over a couple of the location dots after a certain while the hover state stays active when you hover over a couple of the locations (which is not suppose to happen). Everything is suppose to go back the list panel when you hover out of the location dot on the map.
$('a.location').click(function (event) {
var loc = this.id;
if ($('div.panel').hasClass('list')) {
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
$('.panel').removeClass('current');
$('.list').addClass('current');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.view').removeClass('view');
e.preventDefault();
}); //back button
$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');
}, function () {
var dot = this.id;
//hide location hover
$('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
var dot = this.id;
if (!$('div.location-title.' + dot).hasClass('hide')) {
$('div.location-title.' + dot).addClass('view');
} else {
$('div.location-title.' + dot).removeClass('view');
}
event.preventDefault();
});
$('.map__container > span').on({
mouseover: function () { //mouseover
var loc = $(this).attr('class');
$('.panel').siblings().removeClass('current'); //resets all classes that have current
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
$('div.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
var asb = $('.location-title').siblings();
$('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
click: function () {
$(this).off('mouseout');
var loc = $(this).attr('class');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});
Also if you have better suggestions to clean up my JavaScript I'm all ears. Thanks so much!

If i understand right, you might want to try with the event Mouseleave, and i would use to modularize the function toggleClass:
ToggleClass function Jquery
Mouseleave explanation:
mouseleave: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
I hope this helps you. Salutations!

FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
My problem was in the code example above the $(this).off('mouseout'); was removing the mouseout when clicked. So if you were to hover back to that dot on the map and mouseout the 'tooltip' would stay active, it won't disappear when you mouseout, which it should disappear. I couldn't find a way to bind it again so the toggleClass() was much better. I been pulling my hair on this!
$('.map__container span').click(function(mapIcon){
mapIcon.preventDefault();
var icon = $(this).attr('class');
var panel = $(this).attr('class');
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//Show bubbles over dots on map
$('.map__container span').hover(function(){
var hoverdot = $(this).attr('class');
$('.location-title.' + hoverdot).toggleClass('selected');
});
//Show bubbles on hover over anchor links
$('a.location').hover(function(){
var hoverlink = this.id;
$('.location-title.' + hoverlink).toggleClass('selected');
});
//Anchor links show panels and bubbles
$('a.location').click(function(e){
e.preventDefault();
var panel = this.id;
var icon = this.id;
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//back button
$('.back-list').click(function(backButton) {
backButton.preventDefault();
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.list').addClass('clicked');
});

JQuery stop show/hide on click

I have a code snippet that shows a div once you click the menu item, there are different divs on this space and what the menu does is hide the one that was there before and show the new one, the problem is when I click on the same menu item it shows the current div again and I want to stop that from happening, it should only show the animation if it's not the current one, if it is nothing should happen.
Here is the code snippet:
var curPage="";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide("slide");
}
curPage=$(this).data("page");
$("#"+curPage).show("slide");
});
And here is a demo of how it's occuring now: https://jsfiddle.net/Lfsvc1ta/

Just add an additional check to see whether curPage is the same as the clicked page.
var curPage;
$("#menu a").click(function () {
var page = $(this).data("page");
if (curPage && page != curPage) {
$("#" + curPage).stop().hide("slide");
}
$("#" + page).stop().show("slide");
curPage = page;
});
Demo: Fiddle

You have to check what the before page was, adding a variable.
var curPage="";
$("#menu a").click(function() {
var page=$(this).data("page");
if (curPage!=page && curPage.length) {
$("#"+curPage).hide("slide");
curPage=$(this).data("page");
}
$("#"+curPage).show("slide");
});
Like this fiddle https://jsfiddle.net/7b1wh70h/

Check what data-page is clicked first bro.
var curPage="";
$("#menu a").click(function() {
var newPage = $(this).data("page");
if (newPage !== curPage) {
$("#"+curPage).hide("slide");
$("#"+newPage).show("slide");
curPage = newPage;
}
});

jQuery Accordion Panels that wont close

I'm new to jquery and I have the following code that creates accordion style panels from divs. The code runs fine, however, if I click on a panel that's already open, it closes the panel, and then instantly reopens it. This only applies if its an already active panel. If I click a different one it works fine.
$(document).ready(function() {
$('.accordion-section-title').addClass('active');
// Open up the hidden content panel
$('.accordion ' + '#accordion-1').slideDown(300).addClass('open');
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
I've attached a js fiddle, It looks like the issue happens whenever I wrap the title in any tag, if its just blank text, it works fine.
https://jsfiddle.net/russ1337/ynfs4zw3/

based on your fiddle, I have found the problem.
Please see updated fiddle:
https://jsfiddle.net/ynfs4zw3/2/
The problem was the following code:
if($(e.target).is('.active')) {
close_accordion_section();
}else {
...
}
Your if statement said that if e.target is active but in if you clicked directly on the text, the target was the inside the .accordion-section-title div. Which did not have the .active class.

Try removing the close_accordion_section(); in the else statement:
$(document).ready(function() {
$('.accordion-section-title').addClass('active');
// Open up the hidden content panel
$('.accordion ' + '#accordion-1').slideDown(300).addClass('open');
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});

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.

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