Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accordion Menu (is-active) bug? - F6 #11480

Closed
3 tasks done
jinch opened this issue Aug 28, 2018 · 4 comments
Closed
3 tasks done

Accordion Menu (is-active) bug? - F6 #11480

jinch opened this issue Aug 28, 2018 · 4 comments
Assignees

Comments

@jinch
Copy link

jinch commented Aug 28, 2018

What should happen?

When using the .is-active class on a nested menu inside an accordion-menu, it should remain open.

What happens instead?

I am noticing that the .is-active class is removed if you click the accordion-menu closed, than re-open it. This in turn closes all nested menues and does not retain the is-active state.

Possible Solution

Perhaps custom Javascript will be needed to force the .is-active class to remain even after an accordion menu is closed?

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/jinch/pen/aamzYa?editors=1010

How to reproduce:

  1. Click to open the Accordion Menu
  2. Notice the Nested Menu that is OPEN
  3. Click to close the Accordion Menu
  4. Click to open the Accordion Menu Again
  5. Notice the Nested Menu that was once OPEN is now CLOSED

Context

This is a secondary navigation for me and I would like to open the menu and display a marker as to the page the visitor is currently on. This is why I was hoping to use the active class to help the UI and highlight it in a menu once it is opened.

Your Environment

Checklist

  • I have read and follow the CONTRIBUTING.md document.
  • There are no other issues similar to this one.
  • The issue title and template are correctly filled.
@DanielRuf
Copy link
Contributor

In general by adding the is-active to the path. The down method does not really work here.

https://codepen.io/DanielRuf/pen/PdGjMg?editors=1010

@DanielRuf
Copy link
Contributor

I had a similar issue, see #10671

parentsUntil might be helpful here: https://api.jquery.com/parentsUntil/

@ncoden ncoden self-assigned this Sep 3, 2018
@ncoden
Copy link
Contributor

ncoden commented Sep 3, 2018

Hi @jinch,

An Accordion Menu item, like in all Foundation menus, is considered as "opened" because is-active is set. If all sub-menus should be closed when the main menu is closed, then those with is-active initially set are treated like others and should be closed too.

So this is not a bug, this is the expected behavior. However, we could add an option to keep the sub-menu opened when the main menu is closed.

@jinch
Copy link
Author

jinch commented Sep 4, 2018

Ah - I see. Thanks guys for the info and potential work around.

Whats strange is that I was able to get that menu to stay open, but only on the initial click. I am also using data-multi-open="false" in the example menu so not sure that needs to be factored?

@DanielRuf appreciate the reference and will look into that solution though I usually get jammed up when it comes to working out the needed custom JS. It would be awesome if there could be a solution to retain an open state for situations like this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants