nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ToC and epand macro not work together

Marcin Szumicki

Hi,

I have a problem with ToC and expand the macro when I use them together.

Some headers are in expand macro area.

The link from the table of contents doesn't take me to the header (h1, h2, h3, ..) if the header is in expand macro that is currently collapsed.

When macro are epanded links works fine.

h1
h2
h3

(h1)text
asd
--expand macro area --

h2
asda

h3
dsad

--expand macro area --

Accepted answers

David at David Simpson Apps

If the heading is hidden within an expand macro, then the link from the ToC will not automatically open the expand so that you can jump to the heading.

Browsers do not work like that. If the linked item is hidden, likely nothing will happen.

Try structuring your page so that headings are not hidden, or remove some of the nesting levels in the ToC macro.

All comments

David at David Simpson Apps

If the heading is hidden within an expand macro, then the link from the ToC will not automatically open the expand so that you can jump to the heading.

Browsers do not work like that. If the linked item is hidden, likely nothing will happen.

Try structuring your page so that headings are not hidden, or remove some of the nesting levels in the ToC macro.

Marcin Szumicki

Hi, David
thx for answer.

I describe the elements of webservices. H1 is my service and h2 is my method.

Expand macro was supposed to help me present only a given content and reduce the data on the page.
Is there any other replacement for the expanded macro that would work with ToC?

David at David Simpson Apps

If you’re on Cloud, there’s not a lot you can do.

On Server/DC, you could add a client side/ JavaScript click handler on the ToC macro which expands the macro first.

David at David Simpson Apps

As you're on Confluence Server, you can hack this to work.

Add the following code to Custom HTML | At end of the HEAD:

<script>
  // for https://community.atlassian.com/t5/Confluence-questions/ToC-and-epand-macro-not-work-together/qaq-p/1733348#U1733374
  AJS.toInit(function ($) {
    setTimeout(function () {
      $('.toc-macro a').on('click', function () {
          var $self = $(this);
          var $target = $($self.attr('href'));
  
          if($target.is(':visible') == false) {
            $target.parents('.expand-container:first').find('.expand-control:first').click();
            setTimeout(function () {
              if ($target.is(':visible') == true) {
                $self.click();
              }
            }, 300); // wait a little for the expand to open
          }
      });
    }, 3000); // wait a while for the ToC to load. Should really use Mutation Observer API
  });
</script>

This will wait (hopefully) until the ToC has loaded, then for each heading in an expand, when the ToC link is clicked, it will see if the heading is hidden, then open the parent expand macro, then wait a moment while the expand opens, then go to the link.

It's by no means perfect, but a reasonable first attempt at hacking a solution to your problem.

Marcin Szumicki

@David at David Simpson Apps
thank you very much

I will try to test that.
Now i looking for admin in organisation to put changes into code.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

server

confluence-server