Search jQuery

jQuery Forum

Using jQuery

pumpiniron

How to make jQuery accordion menus slide back up?

in Using jQuery • 8 years ago

I'm having a hell of a time with a jQuery project I am working on here:

http://jsfiddle.net/digitalsky/undjdrg8/9/

First off, let me start by saying I AM a newbie to this, I'm learning as a I go as my experience is mostly all front end stuff (HTML, CSS, etc.).

Anyways, what I am trying to accomplish here seems simple, but it's driving me up the wall!

I want the 'Course Schedule' tab to open it's sub-menu when clicked (which it currently does if you see my fiddle above.

Okay, so great, half of it is working! However, now I want the 'Course Schedule' tab to close the sub-menu below it when it's clicked again. In other words, this would function just like an accordion and the top level 'Course Schedule' tab would be the trigger.

Same thing for the second level navigation items that have sub-menus as well.

What am I doing wrong here?

Replies(16)

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

You picked some code that doesn’t have a demo page. It’s not a plugin, nor is it UI.

Can you make a demo of it using http://plnkr.co or http://jsfiddle.net .

Most people have better experiences with Accordion | jQuery UI

JΛ̊KE

pumpiniron

Re: Re: How to make jQuery accordion menus slide back up?

8 years ago

My mistake, a demo of it on a test site can be seen here:

http://devwww.interfacett.com/

Of course in order for it to work you need to be viewing it in a mobile view (or shrink your browser down as much as possible).

You'll see when you click on 'Course Schedule' it opens up the accordion, but when you click on 'Course Schedule' again (which should close the accordion), it takes you to the Course Schedule page instead.

I guess this is what happens when you take someone like myself (whose primary purpose is a front end designer) and throw them into the world of jQuery. I'm learning, slowly but surely.

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

<a href="http://devwww.interfacett.com/course-schedule/">Course Schedule</a>

Is a link. If you don’t want it to go to a page, don’t use a link.

Events bubble. So your click code may also cause click code "above" it to run. You can stop the bubbling by returning false or executing e.preventDefault() when you don’t want it to bubble.

JΛ̊KE

gautamx07

Re: Re: How to make jQuery accordion menus slide back up?

8 years ago

Events bubble. So your click code may also cause click code "above" it to run. You can stop the bubbling by returning false or executing e.preventDefault() when you don’t want it to bubble.

I guess you meant to say e.stopPropagation() instead of e.preventDefault() . :D

jakecigar

Re: Re: How to make jQuery accordion menus slide back up?

8 years ago

I always return false. I get those two mixed some times!

JΛ̊KE

pumpiniron

Re: How to make jQuery accordion menus slide back up?

8 years ago

Oh yes, I need to change that link back to simply #. However, even when it is not a link, it will open the sub-menu, but upon clicking it again it won't close the sub-menu (which is what I would prefer it to do).

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

Rather than play with slideUp and slideDown, you may have better luck with slideToggle.

JΛ̊KE

watusiware

Re: How to make jQuery accordion menus slide back up?

8 years ago

Oh yes, I need to change that link back to simply #

Just leave the href out entirely. Not sure where the popular misconception that an href of "#" is some sort of no-op came from.

Technically, the href is required (pre-HTML5), but don't know of any browser that will misbehave if it is left out. For HTML5, it is now officially optional.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

See here, as well. I agree with this particular answer on this StackOverflow post:

http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0

The unobtrusive JavaScript way

Just don't have a href attribute at all! Any good CSS reset would take care of the missing default cursor style, so that is a non-issue. Then attach your JavaScript functionality using graceful and unobtrusive best practices - which are more maintainable as your JavaScript logic stays in JavaScript, instead of in your markup - which is essential when you start developing large scale JavaScript applications which require your logic to be split up into blackboxed components and templates.

pumpiniron

Re: How to make jQuery accordion menus slide back up?

8 years ago

Updated my original post with a Fiddle I made: http://jsfiddle.net/digitalsky/undjdrg8/9/

I can get the 'Course Schedule' menu to open when you click on it, but I can't get it to close, even when playing around with the '.slideUp' function.

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

Your code is confusing. I added some debugging to see if I could capture the link to slide up. It didn’t work.

Did you write this or did you find it?

JΛ̊KE

pumpiniron

Re: Re: How to make jQuery accordion menus slide back up?

8 years ago

I took something existing, modified it, deleted things, added things on, etc. It works for the most part, just not all the way there yet.

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

jQuery Collapse | webcloud works nicely. Why did you change the layout or the code?

JΛ̊KE

pumpiniron

Re: Re: How to make jQuery accordion menus slide back up?

8 years ago

It works almost perfectly. The default code only allows you to open a top level menu item with a sub menu by clicking the top level link. I would rather have it so that top level menu item functions as a trigger and both opens and closes the sub-menu below. So, the top level item for sub-menus wouldn't even really be a link, it would just be a trigger to open and close the sub-menus like accordions basically.

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

Did you try calling the exact same code for each of the sub menus?

JΛ̊KE

pumpiniron

Re: Re: How to make jQuery accordion menus slide back up?

8 years ago

I tried using this code and calling it right after the first-sub-menu active class in the other function, but no such luck sliding the menus back up.

function checkSlideUp(){
if ( parent_li.hasClass('sub-menu-active') ){
    jQuery('#primary-navigation ul.nav-menu > li > a').off('click').on('click', function(e){

// store parent li to variable
var parent_li = jQuery(this).parent('li');

// store current sub menu in variable
var current_submenu = jQuery('ul.sub-menu', parent_li).first();

    // slide up current sub menu
    current_submenu.slideUp(function(){
        // remove sub-menu-active to current parent li
        parent_li.removeClass('sub-menu-active');


    });
});
}
}

jakecigar

Re: How to make jQuery accordion menus slide back up?

8 years ago

I would have called new Collapse on each different level of the menu.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

How to make jQuery accordion menus slide back up?

Replies(16)

Re: How to make jQuery accordion menus slide back up?

Re: Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Re: Re: How to make jQuery accordion menus slide back up?

Re: Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

The unobtrusive JavaScript way

Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Re: Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Re: Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Re: Re: How to make jQuery accordion menus slide back up?

Re: How to make jQuery accordion menus slide back up?

Statistics

Tags

Actions