Click Menu Node then expand and collapse in oracle apex

Global Page 0, create a new dynamic action on page load that is going to run one the following javascript code depending on the target type you have on your list entry

1. 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(); });

2. 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(); });

EDIT: If you want to use this for a multi-level menu, the javascript dynamic action code will need to be changed. After debug it, I found out that the submenu items are generated dynamically when expanding it’s parent. So the click event from the above code is not registered for the new li tags. We need to

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

$('#t_Body_nav #t_TreeNav').on('click', 'ul li.a-TreeView-node div.a-TreeView-content:has(a[href="#"])', 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').on('click', 'ul li.a-TreeView-node div.a-TreeView-content:not(:has(a))', function(){ $(this).prev('span.a-TreeView-toggle').click(); });