Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Re: Toggle and a Link

Home Forums Older releases 0.9.x Toggle and a Link Re: Toggle and a Link


Hi, here is how you could do it (there might be even a bit simpler way to achieve it but this is what came to my mind at the moment).

I think it makes sense to use the sub arrows (SPAN’s) as toggle elements since they are already there for us. You might just need to tweak their style on small screens – i.e. make them bigger and easier to hit, tweak their positions, etc. And then you need just the following additional JS ondomready:

var $mainMenu = $('#main-menu').on('click', 'span.sub-arrow', function(e) {
		// toggle the sub menu on sub arrow click in collapsible mode
		var obj = $'smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(this).parent(),
				$sub = $item.parent().dataSM('sub'),
				subIsVisible = $sub.dataSM('shown-before') && $':visible');
			$sub.dataSM('arrowClicked', true);
			if (subIsVisible) {
		// don't show the sub menu in collapsible mode unless the sub arrow is clicked
		'beforeshow.smapi': function(e, menu) {
			var obj = $'smartmenus');
			if (obj.isCollapsible()) {
				var $menu = $(menu);
				if (!$menu.dataSM('arrowClicked')) {
					return false;
		'show.smapi': function(e, menu) {
		'hide.smapi': function(e, menu) {

Please let me know if you have any questions.