We Keep Coding

Nav with JS (double open)

I have a problem with my JS code, this code active a div with megamenu but i can open 2 megamenu at the same time, i need when i have already clicked the current megamenu disappears for the second is active. You have an idea ?
$(function() {
var menuVisible = false;
$('.contentLink').click(function() {
var office = $(this).attr('data-office');
if (menuVisible) {
$('#_' + office).hide();
$(this).removeClass('on');
menuVisible = false;
return;
}
else
{
$('#_' + office).show();
$(this).addClass('on');
menuVisible = true;
}
});
});
<nav>
<ul class="menu-links">
<li><a data-office="events" class="contentLink">Events</a>
<div class="megamenu center" id="_events">
My mega menu events
</div>
</li>
<li><a data-office="articles" class="contentLink">Articles</a>
<div class="megamenu center" id="_articles">
My mega menu articles
</div>
</li>
</ul>
</nav>

Yes, add this line on your click() function to hide all megamenu before :
$('.megamenu').hide();
I've edit your code to simplify it :
$(function() {
$('.contentLink').click(function() {
$('.megamenu').hide();
menu = $(this).next();
if(menu.is(':visible')){
menu.hide();
}else{
menu.show();
}
});
});
Live example

Div not displaying using jquery

I have the below which is supposed to change the div depending on the image link clicked.
I want the British content to show automatically on page load, then it gives the option to change the div to display different content (language) by clicking on the image of the flag.
This works in jsFiddle and CodePen but is not working on my site, even when using the exact same code. Whenever I click the Iranian logo it does not load the content.
Any tips?
$(document).ready(function() {
$('#wayfindermenu a').click(function(e) {
hideContentDivs();
var tmp_div = $(this).parent().index();
$('.maincontent div').eq(tmp_div).show();
});
function hideContentDivs() {
$('.maincontent div').each(function() {
$(this).hide();
});
}
hideContentDivs();
$('.maincontent div').eq(0).show();
});
$(function() {
$('#wayfindermenu li a').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
https://jsfiddle.net/pxce3t31/

for some reason, the code $('.maincontent div').eq(1); is bringing back the image of your flag instead of your iran content.
(div class=​"image right" style=​"display:​ block;​">​<img src=​"https:​/​/​www.herts.ac.uk/​__data/​assets/​image/​0008/​24983/​Iran.jpg" alt=​"Flag of Kuwait">​</div>​)
try this implementation instead - target the specific class of the content instead of using indexes:
use data tag attributes to link which flag link goes with which page id, then target that specific div content and show it.
and also, britain doesnt show as default in your page because you dont have $('.maincontent div').eq(0).show(); in your page code, but its in your fiddle. you can also target the specific britain div like i did below $('page1').show();
$(document).ready(function() {
hideContentDivs();
$('#page1').show();
$('#wayfindermenu a').click(function(e){
hideContentDivs();
var target = $(this).data('page'); // gets the data-page attribute
$('#' + target).show(); // shows the page
});
function hideContentDivs(){
$('.maincontent div').hide();
}
});
li {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wayfindermenu">
<li id="link1" class="">
<a href="#!" data-page="page1">
<img src="https://www.herts.ac.uk/__data/assets/image/0005/104909/english.svg.png" alt="Britain flag logo" id="itemImg"/>
</a>
</li>
<li id="link2" class="active">
<a href="#!" data-page="page2">
<img src="https://www.herts.ac.uk/__data/assets/image/0020/104906/Flag_of_Iran.svg.png" alt="Iran flag logo" id="itemImg"/>
</a>
</li>
</ul>
<div class="maincontent">
<div id="page1">british content</div>
<div id="page2">iran content</div>
</div>

I have a menu and I don't how to use proprely slideToggle, to slideDown and slideUp when i pressed another li from ul?

I have a function for main menu :
$('.main-menu-left > li > div').each(function(){
if( $(this).next('.sub-menu').length ){
$(this).on('click', function(e){
e.preventDefault();
$(this).parent('li').find('.sub-menu').slideDown('slow');
});
}
});
And a function for slide up menu:
$('body').on('click', function(){
if( $('.sub-menu').is(':visible') ){
$('.sub-menu').slideUp();
}
});
<ul id="menu-left" class="main-menu-left">
<li>
<div class="group-menu"><span>Browse</span><a id="first-li"><p class="menu-text"><i class="icon-small-arrow-gold"></i>Blinds</p></a></div>
<ul class="sub-menu">
<li><span>Explore</span><u>+</u>Wooden Blinds<b>(18 collections)</b>
<ul class="list-products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<li><a class="title">Next day<p class="details">no Samples of Verticals Blinds</p></a></li>
<li><a class="title">Blackout<p class="details">96 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Pattern<p class="details">120 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Wipeable<p class="details">30 Samples of Verticals Blinds</p></a></li>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="text-explore">&explore all <s>Vertical Blinds</s> </p>
</div>
</div>
</div>
</ul>
</li>
<li><span>Explore</span><u>+</u>Venetians Blinds<b>(20 collections)</b></li>
</ul>
</li>
<li class="hidden-md hidden-sm hidden-xs"><a><p class="menu-text"><i class="icon-small-arrow-gold"></i>Roman</p></a></li>
</ul>
This is html code, for my menu.
It's opening and closing simultaneously. And how can i do to close an li and open other on click ?

You need to bind as different functions so that you can unbind the body click and the fire the slide open, slide closed separately. This is how I would write it:
//Wrap it in a function to avoid conflict. Pass in menu as an object we will use inside
(function ($, menu, undefined) {
//this is the initialiser function
menu.init = function() {
//Store the subNavs as a jQuery array so we can loop them
var subNavs = $('.sub-menu');
//Check there are members in the array
if( subNavs.length > 0 ){
//for each member run the initialiser
$(subNavs).each(function(i, subNav) {
//Select the head of the sub-menu in the DOM. In this case it is a sibling
$(subNav).siblings('.group-menu').on('click', function(e){
//prevent the default action of the click and stop it propagating up to the body
e.preventDefault();
e.stopPropagation();
//test if this is an open menu or closed and send each one to a different handler
if ($(subNav).hasClass('open')) {
menu.clickOff($(subNav));
}
else {
menu.clickOn($(subNav));
}
});
});
}
};
menu.clickOn = function(el) {
//set the element as 'open'
el.addClass('open');
//bind the body click handler
$('body').on('click', menu.clickBody);
//Do the slide down!
el.slideDown('slow');
};
menu.clickOff = function(el) {
//set the element as not 'open'
el.removeClass('open');
$('body').unbind('click', menu.clickBody);
//Do the slide up!
el.slideUp('slow');
};
menu.clickBody = function(e) {
//check if the target is the open menu item itself or part of it
if ($(e.target).closest('.sub-menu.open').length == 0) {
//If not, pass it through to the close handler
menu.clickOff($('.sub-menu.open'));
}
};
//call the initialiser() on page load
menu.init();
}(jQuery, window.menu = window.menu || {}, ""));
You can view the fiddle of this here: http://fiddle.jshell.net/h6Xnb/2/
Hope it helps.

jQuery: Click on a, page goes to top

I have two buttons on my website, they should show content when someone clicks on the button. But instead of showing content, the button takes me back to the top of the page.
jQuery Code
/********************
* Enable Vacature Dropdown
* *****************/
var vacatureClickHandler = $(function(){
$(".vacatures li").on("click", "a", function(event){
if(event.target.attr('id') == 'link-0'){
$('#content-0').toggleClass('active').fadeToggle();
event.preventDefault();
} else if(event.target.attr('id') == 'link-1'){
$('#content-1').toggleClass('active').fadeToggle();
event.preventDefault();
}
});
});
$(".vacatures li").on("click", "a", vacatureClickHandler);
HTML for the jQuery
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA&apos;s</span></h3>
<ul>
<li>
<a id="link-0" href=""><span>OPEN SOLLICITATIE</span><span><img src="../../img/arrow_down.png"</span></a>
<p id="content-0">Blablabla</p>
</li>
<li>
<a id="link-1" href=""><span class="strike">ALLROUND DESIGNER</span><span class="hired">HIRED!</span><span><img src="../../img/arrow_down.png"/></span></a>
<p id="content-1">Blablabla</p>
</li>
</ul>
</div>
Here's the jsFiddle, what it has to do: someone clicks on the dropdown button and then the content shows.

1) You're forgot to include jQuery in jsFiddle
2) Place event.preventDefault(); outside of your if else condition
3) Use this.id instead of event.target.attr('id')
Final code for your click function look like:
$(".vacatures li").on("click", "a", function (event) {
event.preventDefault();
if (this.id == 'link-0') {
$('#content-0').toggleClass('active').fadeToggle();
} else if (this.id == 'link-1') {
$('#content-1').toggleClass('active').fadeToggle();
}
});
Updated Fiddle

If you just have one sibling next to the link you don't need the id's, don't need to "switch" and can use the siblings() method. See this (jsfiddle below):
JS
$('ul.nav > li > a').on('click', function(e){
e.preventDefault()
$(this).siblings().slideToggle();
})
CSS
.content {
display:none;
}
HTML
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA&apos;s</span></h3>
<ul class="nav">
<li>
<span>OPEN SOLLICITATIE</span>
<p class="content">Blablabla</p>
</li>
<li>
<span class="strike">ALLROUND DESIGNER</span>
<p class="content">Blablabla</p>
</li>
</ul>
</div>
http://jsfiddle.net/josfaber/W835D/

scroll to function show #id in url javascript

I am using jquery.scrollTo.js to scroll to blocks in one page onclick.
Html Code:
<ul>
<li>About</li>
<li>Products</li>
</ul>
<div id="about" class="item">
<a name="about"></a>
About content
</div>
<div id="product" class="item">
<a name="product"></a>
Products content
</div>
Internal Script:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
Please refer http://jsfiddle.net/8up4A/ to just view the code in jquery.scrollTo.js . I am trying to show the id name along with the url like http://www.test.com/index.html#about.
If i removed return false in internal script the id displays in url but the scrolling not working correctly. How to achieve this without affecting the scrolling effect. Any Help? Thanks.

$(document).ready(function() {
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
var currentString = $(this).attr('href');
var newString = currentString.substr(1);
$("html,body").animate({
scrollTop: $('a[name="'+newString+'"]').offset().top
}, 2000);
});
});
And you can remove the scrollTo.js plugin, you don't need it.