#display gpx

@jazzper Thanks, I don't use paragraph, prefer to be 100% ckeditor. I will look for another solution. thanks for these informations

@zenimagine

Happy to hear that you got it working, looks nice!

The summary (table of content) is a views block. I use a title paragraph (and the layout paragraphs → module -nice module for content editing from the front end, but not relevant to generating the table of content-) and make a view block:

I use js that I took from a youtube video (I cant write js code but understand it a little when reading it):

Drupal.behaviors.smoothScroll = {
  attach: function (context, settings) {
    // Your custom JavaScript goes inside this function...
    // This JS prefents overlap off the menu over the titles/anchor links by putting
    // the content lower by the height of the menu (#block-views-block-toc-toc-3) + 36px
    // https://www.youtube.com/watch?v=iGUSTyG-CYw
    const navigationHeight = document.querySelector('#block-views-block-toc-toc-3').offsetHeight;

    document.documentElement.style.setProperty('--scroll-padding', navigationHeight + 36 + "px");

    // When clicking outside menu. Close menu.
    var details = [...document.querySelectorAll('details')];
      document.addEventListener('click', function(e) {
        if (!details.some(f => f.contains(e.target))) {
          details.forEach(f => f.removeAttribute('open'));
        } else {
          details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
        }
      })
  }
};

What I didn't manage to do is to make the table of content collapse after clicking one of the links. Please let me know if you manage to do that :)

I use the display suite module to add the anchor id with tokens (but I think you should be able to add the anchor link in the view as well when you set the view to show fields and rewrite the field with a token to make the anchor link):

This is what I can recall. I made the TOC quite a while ago.

@jazzper Thank you for your help, I managed to do it on my web suite and it is much cleaner :

https://www.cocorinet.fr/points-dinteret

https://www.cocorinet.fr/le-roc-au-chien

I have one last question, you presented your content with a summary, which points to parts of the page. I did a few similar things, but using the links in this ckeditor, entering an ID without putting a link. The problem is that the destination ID appears as a link with an empty href.

On your website it is very clean. How did you do this. I could add the IDs manually in the text of the page but it is very long.

THANKS

@zenimagine

Thanx for the compliment! I overrode a view template in my custom theme and added a details element around the filter. Like so:

<div class="details-wrapper">
  <details>
    <summary>Filter Map</summary>
      {{ exposed }}
  </details>
</div>