We Keep Coding

cannot close accordion toggle after open

I can't make my accordion close. It opens on click, however when I click back it doesn't close.
Here is my code:
MYPRO.accordion = function () {
var $acpanel = $(".accordion > .accordion-content"),
$acsnav = $(".accordion > .accordion-title > a");
$acpanel.hide().first().slideUp("easeOutExpo");
// $acsnav.first().addClass("active");
$acsnav.on('click', function () {
var $this = $(this).parent().next(".accordion-content");
if ($this.addClass("active")){
$acsnav.removeClass("active");
$acpanel.first($this).slideDown();
$(this).parent().next().slideDown("easeOutExpo");
}
else
{
$acpanel.first($this).slideUp();
$(this).parent().next().slideUp("easeInExpo");
//$acsnav.removeClass('active').slideUp("easeInExpo");
}
return false;
}); }

Every time you click, $this.addClass("active") returns a jQuery object, so the if will allways evaluate as true, and slide down the tab, never reaching the else statements.
Try something like:
var $acpanel = $(".accordion > .accordion-content"),
$acsnav = $(".accordion > .accordion-title > a");
$acpanel.slideDown("easeOutExpo");
$acsnav.addClass("active");
$acsnav.on('click', function(e) {
if ($acsnav.hasClass("active")) {
$acsnav.removeClass("active");
$acpanel.show().slideUp("easeInExpo");
} else {
$acsnav.addClass("active")
$acpanel.hide().slideDown("easeOutExpo");
}
});
This way you'll first check if its active. If so, slide up and remove the active class. If not active, slide down and remove the active class.
Here is a JSFiddle.
Edit: Updated code and added JSDFiddle.

Toggle box closed if other opens

Can someone help me out with the following code? Can't get it right.
I want it to close opens toggle when clicking on new/other one.
I have this at the moment:
http://jsfiddle.net/78tDj/1/
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle').each(function(){
$(this).find('.toggle-content').hide();
});
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End

is this what you want to achieve?
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle-content').hide();
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle-content').hide();
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End

You need to hide them in your click handler:
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp(); // <- added this!!!!
//...
jsFiddle

No need to call each, it's redundant. Also, simply hide all toggles before opening a new one ..done :-)
$('.toggle a.toggle-trigger').click(function() {
var el = $(this),
parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp();
if (!el.hasClass('active')) {
$('.toggle a.toggle-trigger').removeClass('active');
el.addClass('active');
parent.find('.toggle-content').slideDown();
}
else {
el.removeClass('active');
}
});
http://jsfiddle.net/78tDj/10/

jQuery - when clicking on elements too fast animations get buggy

I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});

Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle

Link in JS dropdown menu does not redirect

So I have had at this all day, but not being a good JS coder it lead me here.
When I click on the link in the dropdown menu leading to "test.html" nothing happens. It redirects nowhere, even if the browser clearly shows that it is the "test.html" link that is active on hovering.
Here is the JS code.
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function headermenu_open(event)
{
headermenu_canceltimer();
headermenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
}
return true;
}
function headermenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function headermenu_timer()
{ closetimer = window.setTimeout(headermenu_close, timeout);}
function headermenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#headermenu li').bind('click', headermenu_open);
$('#headermenu > li').bind('mouseout', headermenu_timer);
$('#headermenu > li').bind('mouseover', headermenu_canceltimer);
});
document.onclick = headermenu_close;
And this is a part of the menu.
<ul id="headermenu">
<li>Høyttalere
<ul>
<li>Test</li>
</ul>
</li>
If anyone has the right snippet to add or can see a mistake in the code I will be extremely happy!

It is because of this line of code
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
}
It goes into this block and return false
Which is equivalent of calling e.preventDefault() and e.stopPropagation() because of which the link does not follow.
Also
if(subMenu) // returns truth y value.. As it is a empty jQuery Object
A better check would be is to check the length
if(subMenu.length)
Code
function headermenu_open(event){
event.stopPropagation(); // need to stop the Propagation first
headermenu_canceltimer();
headermenu_close();
var submenu = $(this).find('ul');
if(submenu.length){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
}
return true;
}
Working Fiddle

Return False - Link Not working - Drop Down

Ok so i have a javascript drop down menu. The drop down menu works fine but when i click one of the drop down links the link does not work. I think it has something to do with my "return false/true" set up.
Javascript:
function ddMenu_open(event)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
}
return true;
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
document.onclick = ddMenu_timer;
}
</script>
So when i remove the "return false" statement my links work but then my drop down menu doesn't stay open. When i remove the return false statement, the drop down menu will open real quick and then shut (barely giving the user time to click an item). What do i need to change in this code so that when i click on the drop down it stays open and then when one of the drop down items/links are click the link actually works.
Again, right now the drop down functionality works fine (when it is click it stays open until there is another click) but when i click on the drop down item the link does not work, new page doesn't load. Thank you for your help.
thanks for the responses but it's still not working for me. Here is my entire code:
<script type="text/javascript">
function ddMenu() {
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function ddMenu_open(e)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
}
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
document.onclick = function(ev){
if(ev.target.nodeName !== 'ul') {
ddMenu_close();
}
};
}
</script>
again i want the drop down menues to close when the document is click except for when the menu itself is clicked. Thanks.

Instead of returning false you could try to just prevent the default behaviour of the pulldown menu like this:
function ddMenu_open(event)
{
ddMenu_close(e);
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
e.preventDefault();
}
return true;
}
Note: You don't need to declare an argument in ddMenu_open and you don't need to return true at the end of ddMenu_open. But I understand where you are coming from. This book by the way will get you up to speed: http://eloquentjavascript.net/