While I'm sure you could figure out the problem with this Do-It-Yourself approach, I would advise using the built-in Dynamic Actions for showing/hiding items and regions. You would then not need to do any hand-coding of CSS or javascript (although that is indeed how dynamic actions work, but they do it in a systematic built-in way). Here is a documentation reference to get you started:

https://docs.oracle.com/database/121/HTMDB/advnc_dynamic_actions.htm#HTMDB28003

Ah ok, I see. I didn't realize this was sort of a special template region. Thanks for the screen shot, definitely clarifying. I think your approach will probably work with some tweaks.

Some minor errors in the javascript you have proposed: you will want to use the element ID in your jquery selector, so prefix with the hash mark ("#"). Also, I think that #t_TreeNav is "too far down" the tree, and you will only clear out the clickable nav controls in the bar. Instead you will probably want to select #t_Body_nav .  Also, the t-header-branding css class corresponds to the horizontal top-bar (at least in my 5.0 installation's universal theme).

Try this: skip the CSS, just put " $('#t_Body_nav').hide(); " into an Execute JavaScript Code action (true) for an After Page Load event.

And later in page actions, if you want it back again, just issue the "reverse" javascript/jquery

  $("#t_Body_nav").show();

In a dynamic action, preferably.

I'm glad it worked out. After peeking at the DOM changes while clicking the expand/collapse button, you can get it down to the collapsed width if you add this in:

//Collapse the left-hand nav sidebar

$("body").removeClass("js-navExpanded").addClass("js-navCollapsed");

//And reverse that process to re-expand

$("body").addClass("js-navExpanded").removeClass("js-navCollapsed");

After that, to get it any further you'd need to modify the properties of the js-navCollapsed class (which, it turns out, is tricky)

or you might get by with assigning CSS attribute values directly to the content ellements.

$("#t_Body_content").css("margin-left","5px");

So all together now:

$("body").removeClass("js-navExpanded").addClass("js-navCollapsed");

$('#t_Body_nav').hide();

$("#t_Body_content").css("margin-left","2px");

This definitely gets into less stable territory, as future upstream changes to themes might affect how this kind of approach works, or unforseen combinations of page actions break it. But I know sometimes its the best option, just caveat emptor and all that.

Hello kvsinfo

Have you thought of using the "Minimal (No Navigation)" page template?

That way you don't need to have any JavaScript code on you page.

Hope this helps

Max