Accordion Placement on Table of Contents


When I use accordions together with auto outlining, it shows up like this.

I'd like to get the Accordion Headers to show up underneath Test h4 on the Table of Contents menu. Is there any way to do that? I have a lot of pages that make use of accordions, auto outlining, and headers of a variety of sizes, which causes the ToC's visual layout not to look very good. 

Blood and Bourbon, 2017 Campaign of the Year


  • thaen
    Posts: 939

    I don't have a good answer for you, but I have a couple hacks you can play with that might get you there.

    Looks like the issue is that the accordions are implemented using the H3 headings.  The Table Of Contents looks at the H* headings to build itself.  H1 through H5.  (Apparently H6 doesn't count.)  And then organizes them hierarchically.

    So when the ToC sees the H3s in the accordion, it automatically sticks them at the "H3" level indentation in the hierarchy.

    So Hack #1 is to only use H1 and H2 headings in your pages, that is, if you want to also use an accordion (which uses the H3s) that falls under either of those headings.  Here you have H2, H3, and H4, so that's not going to work here...even if you shifted to using H1, H2, and H3.

    Hack #2 is to use Custom CSS to add padding to the accordion's parent heading in the Table Of Contents to visually shift it over so that it visually sits where you want it to.  To do this, you would need to put an H1 or H2 as the heading right before the accordion.  (You might choose one or the other based on what bullet point you want.)

    That would place the accordion Table Of Contents as children of that heading.  Then you can use the nth-of-type CSS selector to choose that parent heading and add some padding-left to it.  This would have to be done on each page where the problem was happening.  I haven't played with this very much, so there could be some gotcha that I'm not thinking of.  If you decide to go this route and run into any issue, feel free to post back here and we can help work through them if possible.

    One other option instead of padding them is to just hide the accordion Table Of Contents entries altogether.


    Obsidian Portal Developer

Sign In or Register to comment.

June 2022
Baldur's Gate

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!