robfelty

This is a very simple plugin that uses Javascript to form a collapsable set of 
links in the sidebar for the pages. Every page corresponding to a given 
parent page will be expanded.
It is largely based off of my Collapsing Pages and Collapsing Pages 
plugins.
<h3>What’s new?</h3>
<ul>
<li>
2.0.3 (2024.01.01)
<ul>
<li>Fixed issue with subsubpages not closing correctly</li>
<li>Got rid of some more warnings</li>
<li>Tested with 6.4.2</li>
</ul>
</li>
<li>
2.0.2 (2023.12.01)
<ul>
<li>Got rid of some warnings</li>
<li>Updated deprecated property __experimentalGroup</li>
<li>Tested with 6.4.1</li>
</ul>
</li>
<li>
2.0.1 (2023.06.16)
<ul>
<li>Bug fixes</li>
</ul>
</li>
<li>
2.0.0 (2023.03.17)
<ul>
<li>Updated to use Gutenberg block</li>
</ul>
</li>
<li>
1.0.1 (2016.05.09)
<ul>
<li>Fixed bug where sometimes setting accordion to false broke javascript</li>
</ul>
</li>
<li>
1.0 (2015.08.12)
<ul>
<li>Compatible with WordPress 4.3</li>
<li>Fixed bug where expanding symbol showed up at lowest depth specified instead 
(thanks to tkibler for pointing it out)</li>
<li>Added option to only display pages of the current subpage</li>
<li>Added option to show top-level page (previously it was always shown)</li>
<li>Added accordion style option</li>
<li>Cleaned up widget settings</li>
<li>improved style management, including the ability to specify style per widget</li>
<li>Switched from unicode symbols to html entities</li>
<li>Not showing tags for title if empty</li>
<li>Fixed bug with title attribute of pages</li>
<li>Totally rewrote javascript</li>
</ul>
</li>
</ul>
<h3>Options</h3>
If using the manual version, you can pass options either as an array, or using 
the query style, just like for other wordpress functions such as 
 wp_list_pages
<pre><code> $defaults=array(
 'title' => __('Pages', 'collapsing-pages'), 
 'sortOrder'=> 'ASC' ,
 'sort'=> 'pageName' ,
 'defaultExpand'=> '',
 'expand' => 0,
 'depth' =>-1,
 'inExcludePage' => 'exclude',
 'linkToPage' => true,
 'inExcludePages' => '',
 'showPosts' => false,
 'animate' => 0,
 'useCookies' => true,
 'postTitleLength' => 0,
 'showTopLevel' => true,
 'currentPageOnly' => false,
 'debug' => false,
 );
</code></pre>
<ul>
<li>inExcludePage
<ul>
<li>Whether to include or exclude certain pages
<ul>
<li>‘exclude’ (default) </li>
<li>‘include’</li>
</ul>
</li>
</ul>
</li>
<li>inExcludePages
<ul>
<li>The pages which should be included or excluded</li>
</ul>
</li>
<li>showPosts
<ul>
<li>Whether or not to include posts as well as pages. Default if false</li>
</ul>
</li>
<li>linkToPage
<ul>
<li>True, clicking on a parent page title will link to that page (default)</li>
<li>False, clicking on a parent page will expand to show sub-pages</li>
</ul>
</li>
<li>sort
<ul>
<li>How to sort the pages. Possible values:
<ul>
<li>‘pageName’ the title of the page (default)</li>
<li>‘pageId’ the Id of the page</li>
<li>‘pageSlug’ the url of the page</li>
<li>‘menuOrder’ custom order specified in the pages settings</li>
</ul>
</li>
</ul>
</li>
<li>sortOrder
<ul>
<li>Whether pages should be sorted in normal or reverse 
order. Possible values:
<ul>
<li>‘ASC’ normal order (a-z 0-9) (default)</li>
<li>‘DESC’ reverse order (z-a 9-0) </li>
</ul>
</li>
</ul>
</li>
<li>expand
<ul>
<li>The symbols to be used to mark expanding and collapsing. Possible values:
<ul>
<li>‘0’ Triangles (default)</li>
<li>‘1’ + –</li>
<li>‘2’ [+] [-]</li>
<li>‘3’ images (you can upload your own if you wish)</li>
<li>‘4’ custom symbols</li>
</ul>
</li>
</ul>
</li>
<li>customExpand
<ul>
<li>If you have selected ‘4’ for the expand option, this character will be 
used to mark expandable link categories</li>
</ul>
</li>
<li>customCollapse
<ul>
<li>If you have selected ‘4’ for the expand option, this character will be 
used to mark collapsible link categories</li>
</ul>
</li>
<li>postTitleLength
<ul>
<li>Truncate post titles to this number of characters (default: 0 = don’t 
truncate)</li>
</ul>
</li>
<li>animate
<ul>
<li>When set to true, collapsing and expanding will be animated</li>
</ul>
</li>
<li>useCookies
<ul>
<li>When true, expanding and collapsing of pages is remembered for each 
visitor. When false, pages are always display collapsed (unless 
explicitly set to auto-expand). Possible values:
<ul>
<li>true (default)</li>
<li>false</li>
</ul>
</li>
</ul>
</li>
<li>showTopLevel
<ul>
<li>True – show top level pages (default)</li>
<li>False – only display sub-pages and below</li>
</ul>
</li>
<li>currentPageOnly
<ul>
<li>True – show only parent and sub pages of the current page</li>
<li>False – show all pages (subject to the include or exclude parameters 
set) (default)</li>
</ul>
</li>
<li>debug
<ul>
<li>When set to true, extra debugging information will be displayed in the 
underlying code of your page (but not visible from the browser). Use 
this option if you are having problems</li>
</ul>
</li>
</ul>
<h4>Examples</h4>
<pre><code>collapsPage('animate=true&sort=ASC&expand=3,inExcludePages=about')
</code></pre>
This will produce a list with: 
* animation on 
* shown in alphabetical order 
* using images to mark collapsing and expanding 
* exclude page about
<h3>Demo</h3>
I use this plugin in my blog at http://blog.robfelty.com
<h3>CAVEAT</h3>
Currently this plugin relies on Javascript to expand and collapse the links. 
If a user’s browser doesn’t support javascript they won’t see the links to the 
posts, but the links to the pages will still work (which is the default 
behavior in wordpress anyways)

Collapsing Pages

This plugin uses Javascript to dynamically expand or collapsable the set of pages for each parent page.

brendaegeland

A common web design pattern is to have a primary navigation with the top level pages, and then a separate 
navigation element on each page that shows only those pages related to a common top-most page. This widget helps 
to build those secondary navigation elements.
If your page structure was like this:
<ul>
<li>Home</li>
<li>About</li>
<li>— Our History</li>
<li>— Our Staff</li>
<li>— — Employment Opportunities</li>
<li>Services</li>
<li>— Widget Development</li>
<li>— Gadget Deployment</li>
<li>Contact Us</li>
</ul>
and you added the widget with its default settings to a sidebar, it would create a list like this:
<ul>
<li>About</li>
<li>Our History</li>
<li>Our Staff</li>
<li>— Employment Opportunities</li>
</ul>
on any of the pages in the About subtree. Notice that the top-most ancestor, About, is included as the first element of the list.
<h4>Options</h4>
<ol>
<li>Title. The widget title. If left blank, it defaults to the title of the top ancestor page.</li>
<li>Show Title. Maybe you don’t want a title. Just turn it off here.</li>
<li>Top Page. You can select one of your pages to be the top page, or you can choose Default, which determines the top-most ancestor of the page being displayed.</li>
<li>Menu Class. Gets applied to the outermost <ul> element.</li>
<li>Before Links. HTML to be inserted before links in the list.</li>
<li>After Links. HTML to be inserted after links in the list.</li>
</ol>

Subpages in Context

Lists pages and subpages for a given page, or the top ancestor of the current page and all of the ancestor's descendants

Collapsing Pages vs Subpages in Context