Oracle APEX side navigation menu - expanding sub navigation menu items

Question

I have a nav menu item (Nav Item 1) that has three sub items under it. No page is directly tied to Nav Item 1. To expand it, you must click the down carat. However, is there a way to make it so that the user can just click anywhere on the entire nav menu button rather then clicking the carat only? See below:

Nav Item 1
   Sub item 1 
   Sub item 2 
   Sub item 3

Does anybody know how to do this?

score 1 · Accepted Answer · answered May 10 '20 at 09:10

Max has provided a solution in this blog post: https://askmax.blog/2016/01/27/accordion-like-navigation-menu/

Basically you need to invoke the click() function by clicking the top List Item using little JavaScript code.

Quoting Max Answer:

Use this one if you set your target type to URL and your URL target to #

$('#t_Body_nav #t_TreeNav li.a-TreeView-node--topLevel > div.a-TreeView-content:has(a[href="#"])').click(function(){
    $(this).prev('span.a-TreeView-toggle').click();
});

Use this one if you set your target type to - No Target -

$('#t_Body_nav #t_TreeNav li.a-TreeView-node--topLevel > div.a-TreeView-content:not(:has(a))').click(function(){
    $(this).prev('span.a-TreeView-toggle').click();
});

Oracle APEX side navigation menu - expanding sub navigation menu items

1 Answers1