One time event?

I use this simple function for a vertical accordion menu:

	$(document).ready(function () {
		$( ".menu dd" ).hide();
		$( ".menu a:not(.subitem)" ).click(function(e){
			$( ".menu dd:visible" ).slideUp( "slow" );
			$( this ).parent().next().slideDown( "slow" );
			return false;

And it is actually working fine exept for one small thing. When you click on a link that has a submenu it is executed right. But if by accident you click on the same link again the entire slideUp/slideDown event is executed again. I tried the one time event .one():

  $( ".menu a:not(.subitem)" ).one().click(function(e){

but that isn’t working. What should I do to make the event just occurs ones while the sub menu is open.

Thank you

Hi donboe,

Could you post a quick demo of the accordion?

It’s this one: [U][/U].

  • Click on “Voorgerechten”, and the submenu is rolling out.
  • Then click again on “Voorgerechten”, then the submenu is rolling in first, and back out immediately afterwards.

I think there has to be added a toggling if/else statement to see if the submenu is visible or not. If not visible > open submenu, else > close submenu.
How to do in jQuery … don’t know, but Pullo or some other will have the simple code for that, I guess. :slight_smile:

Hi Francky. That is the page I am referring to yes. I have no clue either how to adjust that. Probably Pullo indeed will :slight_smile:

Ha, with some Googlin’ I found jQuery has a simple built-in function to toggle a submenu with a roll-out / roll-in effect: slideToggle() ! :slight_smile:

If I apply this to your menu-menu, it can be something like this:

$( "#vooraf" ).click(function() {
	$( "#voorafSubs" ).slideToggle( "slow" );

$( "#hoofd" ).click(function() {
	$( "#hoofdSubs" ).slideToggle( "slow" );

$( "#menulijst" ).click(function() {
	$( "#menulijstSubs" ).slideToggle( "slow" );

Note: I should start with the complete Menu’s, and then the “losse Gerechten” (loose Dishes). Are there no “Desserts”? Or a “Drankenkaart” (Drinks menu), to be complete?


Francky I think donboe needs the other menus to close when one opens (as usual with accordions).

This should work buy is a bit long winded.

$(document).ready(function () {
		$( ".menu dd" ).hide();
		$( ".menu a:not(.subitem)" ).click(function(e){
			var myTarget = $( this ).parent().next(); 
			var dontSlide = 0;
			if (':visible')){dontSlide = 1}
			$( ".menu dd:visible" ).slideUp( "slow" );
			if (dontSlide == 0){
					myTarget.slideDown( "slow" );
			return false;

Pullo will be able to tidy it up :slight_smile:

Hahahahaha. Thank you Paul. This is nearly what I am looking for! It just slide up again when clicking the parent again and not down again. But I am looking for away that it isn’t sliding at all when the parent is clicked again while the sub is open!

Hi there,

Sorry for the delayed response, I was tied up all day.

Anyways, I think this is what you’re after:

$(".menu dd").hide();
$(".menu dt").click(function(){
  var $menuItem = $(this),
      isAccordion = $menuItem.find(">:first-child").hasClass("accordeon"),
      accordionIsVisible = $":visible")

  if(!(isAccordion && accordionIsVisible)){
    $(".menu dd:visible").slideUp("slow");


Hope I understood what you are trying to do correctly.

Then how will you close it? :slight_smile: I usually like to close the accordion once I’ve used it otherwise it takes up space on the page.

By clicking on another item, or never. :wink:
But I agree: it’s more userfriendly to close a thing with the same link as with which you opened it.

Hi Pullo. That is indeed what I was looking for. It all seems so simple when you see it. I was struggling for hours. Thanks to Paul I was a step nearer and now It is like I would like to. So thanks again. Also thanks to Paul and Francky

No probs :slight_smile:

Bear in mind what Paul said with the default accordion behaviour, however.
I often do the same thing (i.e. shut it, to stop it taking up space, especially if viewing on a small screen).
Would it really hurt to offer this to your users?

Hi Pullo. I agree with both you and Paul, but this is how the client wants it, and Customer is King :slight_smile: