$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
/* accordion_head.first().addClass('active').next().slideDown('normal'); */
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
I have tried a few attempts # getting the active accordion header to close on click but cant seem to work it out :(
Thanks in advance
Steven
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
/* accordion_head.first().addClass('active').next().slideDown('normal'); */
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
} else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}
});
});
After searching awhile and not being any type of voice on Javascript, I eventually figured it out. This is a working version :) for peeps like me :) enjoy
It appears you remove the active class from accordion_head with this line:
accordion_head.removeClass('active');
and then add it back immediately afterward with this line:
$(this).addClass('active');
I suspect you don't want to re-add the active class?
Try:
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
else {
// Other code that applies when accordion_head is not active
accordion_head.removeClass('active');
}
});
Related
I would like to hide the submenus and show them after their parents get clicked. At the moment I'm using a snippet I found on here, which unfortunately doesn't hide the submenu when loading. So I'm basically looking for an inverted solution of this or something completely else :)
The site: https://webnew.dpg-gruppe.eu
The snippet:
$(document).ready(function () {
$('#navmenu > ul > li:has(ul)').addClass("has-sub");
$('#navmenu > ul > li > a').click(function () {
var checkElement = $(this).next();
$('#navmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#navmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can try to add this line
$('#navmenu ul.sub-menu').hide();
after $(document).ready(function () {
I recently bought a website and am having trouble with editing it to make it fit to my needs. The thing I'm trying to achieve is that making the side navbar toggle to hide the nav list when the window size gets smaller than 800 px. I'm sure this must be a ludicrously easy task to complete for many of you but I'm quite new in playing around with such codes. I hope you can take time to help with it.
Thanks in advance,
Here is the jQuery code needs to be edited.
$(document).ready(function() {
"use strict";
$("nav ul li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("nav ul").slideToggle(200);
});
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("nav ul").show();
} else {
$("nav ul").hide();
}
$("nav ul li").unbind('mouseenter mouseleave');
$("nav ul li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
});
if ($(window).width() < 800) {
$("nav ul li a").click(function() {
"use strict";
$("nav ul").slideToggle(200);
});
}
I am working on a dot navigation for sections in a one page layout. It currently will go to the sections on click. I also have been able to get the labels and dot change to show on hover. But I am struggling to have the navigation reflect the section when scrolling. I have added bootstrap to jsfiddle external resources and added the recommended body code, but something is still apparently missing. Any assistance would be greatly appreciated.
http://jsfiddle.net/carincamen/ram0Ly92/27/
<body data-spy="scroll" data-target=".Vnav">
$(document).ready(function($){
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
});
With lots of research, I was able to get all the functions working properly. The final key was using parPosition. Here is the final code.
http://jsfiddle.net/carincamen/ram0Ly92/
$(document).ready(function($){
var parPosition = [];
$('.par').each(function() {
parPosition.push($(this).offset().top);
});
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
$(document).scroll(function(){
var position = $(document).scrollTop(),
index;
for (var i=0; i<parPosition.length; i++) {
if (position <= parPosition[i]) {
index = i;
break;
}
}
$('.vNav ul li a').removeClass('active');
$('.vNav ul li a:eq('+index+')').addClass('active');
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Having a few issues with this badboy:
Basically need it so that when one of the hidden lists collapses the markup is checked to see if there are any other 'active' lists already open, and to close those before a new one is opened. It looks messy if more than one is open at the same time.
Link:
http://www.matchboxlondon.com/ten/menu3/index.html
Try:
1. Click Menu
2. Click Services
3. Click Pilates to expand
4. Click Fitness to expand
Problem: Heading is also removed when .slideup() is used.
What my code is doing at the moment is checking to see if anything is opened with a globally defined variable called 'somethingOpen' - this is set to null on page load. This is all well and good BUT I feel it may have something to do with the complete display:none of the collapsable lists:
Because it's listy and nesty, I'll only include the js in here and not the markup:
somethingOpen = null; // to set after close and open
$('#cssmenu > ul > li > a').click(function () {
if (somethingOpen === true) { // first check
$("#cssmenu > ul > li").each(function () {
$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // <-- problem here
somethingOpen = false; // closing so set to false
return false; // exit function
});
} // End somethingOpen if
// Open
var checkElement = $(this).next(); // more checks
$(this).closest('li').addClass('active'); // add active class
somethingOpen = true; // redefine if anything is open
// Close
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
somethingOpen = false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
// Returns
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
}); // End click
Try This:
//$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // -- problem here
$("#cssmenu > ul > li.active").animate({height: "toggle", opacity: "toggle"}, 'fast');
For anyone that was interested, it needed a little tweaking, using children() and an after (>) to properly select the right element.
somethingOpen = null; // to set after close and open
$('#cssmenu > ul > li > a').click(function () {
if (somethingOpen === true) { // first check
$("#cssmenu > ul > li").each(function () {
$("#cssmenu").children('.active').removeClass('active');
$("#cssmenu > ul > li > ul").slideUp('normal');
somethingOpen = false; // closing so set to false
return false; // exit function
}); // end each
}
}); // End somethingOpen if
I'm not that good with js. How do I get this to work with hoverIntent?
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
return false;
});
I have try searching around, but just not too sure how to do it. It's basically working now with hover. but how do I add in .hoverIntent into the code.
This is the Fiddle.
I can't just change .hover to .hoverIntent right?
For hoverIntend, see jQuery plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
(You just have to download the minified version and import it to your application: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js).
Here the jsFiddle: http://jsfiddle.net/Fmu8Y/1/
Also a helpful link: Delay jquery hover event?
$(document).ready(function () {
$('#nav > li > a').hoverIntent(function(){
if (!$(this).hasClass('active')){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
}, function() {
if ($(this).hasClass('active')){
$(this).next().slideUp(800);
$(this).removeClass('active');
}
});
return false;
});