This is a test where a scroll-to target will open an expand, however will then scroll back to the top of the page–or actually an element at the top of the page defined as:<h2='top'>Scroll Target at Top<H2>
Scroll Target at Top
This is just some filler text to move the expand item a bit further down the screen. In fact, why not just throw in an image and save us all a heap of blibber blabber text. Here is a photo of a donkey stuck in a manhole cover. Silly donkey, you are not a man… you’re a donkey.
Now we place an expand element with a defined ID and scrolltarget value:[expand title="trigger text" id="monkey" scrolltarget="#top"/]
So navigating directly to
https://spacedonkey.de/3439/scroll-targets-and-url-hash/#monkey
will scroll down to the monkey element, open it, then scroll back up to the top element. This bouncing around is quite annoying.
Introducing: hash-trigger
This is a test where we introduce a new attribute called hash_trigger. This is an secondary id that will be use to expand but not scroll to a collapse element based on the url anchor hash. For example. We create an expand element like so:[expand title="trigger text" id="smashing" hash_trigger="pumpkins"/]
Now when we link directly to the page with the url anchor hash of #smashing it will scroll to and expand the element above as normal. However, if we use the url anchor hash of #pumpkins it will only expand the element and NOT scroll anywhere , providing:
1. there is no other element with an ID of pumpkins
2. there is no scroll-to attribute defined on this expand element.
Note: to assign the hash_trigger using the roll-your-own method, simply assign a data-hash-trigger attribute to the trigger element:
<div class="collapseomatic" id="smashing" title="trigger text" data-hash-trigger="pumpkins">trigger text</div>