Space Donkey

This is a test Collapse-Pro-Matic’s ability to use external triggers to auto expand and scroll to other expands on the same page.
First we need quite a bit of text. Here is some from the Wiki entry for Star Wars:

Star Wars

Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas. It depicts the adventures of characters “a long time ago in a galaxy far, far away”.

The franchise began in 1977 with the release of the film Star Wars (later subtitled Episode IV: A New Hope in 1981[2][3]), which became a worldwide pop culture phenomenon. It was followed by the successful sequels The Empire Strikes Back (1980) and Return of the Jedi (1983); these three films constitute the original Star Wars trilogy. A prequel trilogy was released between 1999 and 2005, which received mixed reactions from both critics and fans. A sequel trilogy began in 2015 with the release of Star Wars: The Force Awakens and continued with the release of Star Wars: The Last Jedi (2017). The first eight films were nominated for Academy Awards (with wins going to the first two films released) and have been commercial successes, with a combined box office revenue of over US$8.5 billion,[4] making Star Wars the second highest-grossing film series.[5] Spin-off cinematic films include Rogue One (2016) and Solo: A Star Wars Story (2018).

Now we place a little expand element for R2D2 that we will reference below:

[expand title="R2D2" id="droid2d2"]...[/expand]

Now we have another expand element with a link to R2D2 above using:

<a class="expandanchor" href="#droid2d2">R2-D2</a>

This is some text

Here is a headline

Numbered List Items

<ul class="numbers">
    <li data-pos="2">one</li>
    <li data-pos="2">two
        <ul>
            <li data-pos="2">two.one</li>
            <li data-pos="2">two.two</li>
            <li data-pos="2">two.three</li>
        </ul>
    </li>
</ul>

• one
• two
  • two.one
  • two.two
  • two.three
• three
  • three.one
  • three.two
    • three.two.one – this is a much longer piece of text that will wrap around and should display how the padding and offset of the numbering works with a longer text.
    • three.two.two
• four

CSS:

ul.numbers {
    counter-reset: levelone;
    list-style: none;
}

ul.numbers > li {
    counter-increment: levelone;
}

ul.numbers > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") ". ";
}

ul.numbers ul {
    counter-reset: leveltwo;
    list-style: none;
}

ul.numbers ul > li {
    counter-increment: leveltwo;
}

ul.numbers ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") ". ";
}

ul.numbers ul ul {
    counter-reset: levelthree;
    list-style: none;
}

ul.numbers ul ul > li {
    counter-increment: levelthree;
}

ul.numbers ul ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") "." counters(levelthree, ".") ". ";
}