I think the best way to approach this is to just jump in and look at the example. It consists of several pages that are identical except for the page title and the heading.
Nodes with circular bullets have no submenus, and are not expandable. Nodes with arrows are expandable. Clicking on an arrow expands or collapses that node without a page load. Clicking on a link loads a new page and expands that node if it can be expanded.
The state of the menus persists across page loads.
The script requires two other scripts, plus a CSS file, which you’ll probably want to tweak.
The example also uses these images, which you’re welcome to use, but don’t have to: