I was trying to create anchor points and links to those anchor points within an Accordion Module, but it’s not working. What’s confusing is that I have ability to create the Anchor Point within the Accordion Module, but just not enact it within the module. If this could be a feature created in the future, that would be fantastic
Hi @MWeaver94,
can you please provide some more informations like is it a default, theme or custom module and what you would like to achieve?
From my experience the best way to handle anchor/jumpmarks is with custom modules.
A jumpmark is an ID so you can create a simple custom module with just a text(not rich-text) element. For this example I’ll call it “Jumpmark”.
The HTML+Hubl should look like this
<div id="{{module.jumpmark|lower|replace(' ', '-')}}" class="jumpmark"></div>
The additional filters are implemented for “bullet-proofness”. The “lower” filter will reqrite the text value to lowercase and the “replace” will replace any blanks/spaces with a dash. Otherwise you’ll get several IDs.
Useage: Drop this module at any location in your page you’d like to jump to later.
Tipp: Add a “jumpmark” class to this code and put the following code to your CSS file
.jumpmark{
height:0;
}
This will prevent a possible height of the div.
If you implement an anchor/jumpmark into a rich-text (which should be the content area of your accordion) look at the source-code of it and edit the the anchor(<a>-tag) so it has the exact id as in the module.
So if you’ve put “This is an anchor” into the custom module the id will be “this-is-an-anchor”.
The <a>-tag in the rich-text/content should look like
<a href="#this-is-an-anchor">Some text</a>
Note: You’ll need to add some JavaScript with an window offset to it. Otherwise the custom-module will hit the top of your browser. If you have a sticky/fixed header it will overlay the content which doesn’t provide a great user experience.
best,
Anton
Just wanted to add to @Anton 's great tutorial that you can now also use scroll-margin-top or scroll-padding-top in CSS, instead of JavaScript, to include an offset when anchoring with a sticky/fixed header on the page. Scroll snap module in CSS came out in 2021 and is now supported in all major browsers!
:root {
scroll-padding-top: 100px;
}
Hi @MWeaver94
Unfortunately, anchor points and links to those anchor points are not currently supported within the Accordion Module. However, there is a workaround that you can use.
1. Create a regular text module and add your anchor text to it.
2. In the Custom CSS section, add the following CSS rule:
```
#my-anchor-point {
/* Your CSS styles here */
}
```
3. In the Accordion Module, add a link to the text module.
4. In the link’s URL, add the anchor text as a parameter, like this:
```
https://example.com/my-page#my-anchor-point
```
When a user clicks on the link, the browser will scroll to the anchor point in the text module.
I hope this helps! Let me know if you have any other questions.
Here are some additional details about the workaround:
* The anchor text must be unique.
* The anchor text must be enclosed in a pair of pound signs (#).
* The anchor text must be placed in the Custom CSS section of the text module.
* The link to the text module must be placed in the Accordion Module.
* The link’s URL must include the anchor text as a parameter.
Hope this will helps you out. Please mark it as Solution Accepted to help other Community member.
Thanks!
Chiming in to have this feature be added to input anchor into Accordion module FAQ “Question” and NOT the collapsed “Answer”. I need the anchor to link from the Table of Contents to the Question NOT the collapsed “Answer” as anchors will not work within collapsed accordion text. Can we get this feature implemented to allow anchors in the Question field?
