Menu icon Foundation
Accordion Menu only on "small"

Hi!

I try to init the accordoin menu only on "small" and destroy it on larger viewports. I thought with the cool foundation javascript utilities it will work but I failed. Is my plan not possible or what am I doing wrong?

Here my js:

$('[data-accordion-menu]').foundation();

if( Foundation.MediaQuery.atLeast('large') ){
	$('[data-accordion-menu]').foundation('destroy');
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    if((newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') && (oldSize == 'medium' || oldSize == 'small')){
    	$('[data-accordion-menu]').foundation('destroy');    	
    }else if((oldSize == 'large' || oldSize == 'xlarge' || oldSize == 'xxlarge') && (newSize == 'medium' || newSize == 'small')){
    	// $('[data-accordion-menu]').foundation();
    	Foundation.reInit( $('[data-accordion-menu]') );
    }
});

It destroys larger than "small" but if I change the viewport back to "small" then nothing happens and If I get to "medium" or "large" I get following error messages:

"Uncaught ReferenceError: We're sorry, 'destroy' is not an available method for this element."

Can someone help me or give me a hint?

 

accordion-menujavascriptjsmediaquery

Hi!

I try to init the accordoin menu only on "small" and destroy it on larger viewports. I thought with the cool foundation javascript utilities it will work but I failed. Is my plan not possible or what am I doing wrong?

Here my js:

$('[data-accordion-menu]').foundation();

if( Foundation.MediaQuery.atLeast('large') ){
	$('[data-accordion-menu]').foundation('destroy');
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    if((newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') && (oldSize == 'medium' || oldSize == 'small')){
    	$('[data-accordion-menu]').foundation('destroy');    	
    }else if((oldSize == 'large' || oldSize == 'xlarge' || oldSize == 'xxlarge') && (newSize == 'medium' || newSize == 'small')){
    	// $('[data-accordion-menu]').foundation();
    	Foundation.reInit( $('[data-accordion-menu]') );
    }
});

It destroys larger than "small" but if I change the viewport back to "small" then nothing happens and If I get to "medium" or "large" I get following error messages:

"Uncaught ReferenceError: We're sorry, 'destroy' is not an available method for this element."

Can someone help me or give me a hint?

 

Lukas Hausammann over 3 years ago

I have now found a better solution. But it is still not perfect:

$(document).foundation();

	if( Foundation.MediaQuery.atLeast('large') ){
		$('li.is-accordion-submenu-parent > a').off('click.zf.accordionMenu');
	}

	$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
	    if((newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') && (oldSize == 'medium' || oldSize == 'small')){
			$('li.is-accordion-submenu-parent > a').off('click.zf.accordionMenu');
	    }else if((oldSize == 'large' || oldSize == 'xlarge' || oldSize == 'xxlarge') && (newSize == 'medium' || newSize == 'small')){
	    	Foundation.reInit(['accordion-menu']);
	    }
	});

 

 

If someone has a better idea, I would be happy.