Component documentation

Basics

Components

Objects

Utilities

Table of content with content and interactive

Here's an example with the related content and the dynamic links that scroll to the right place.

Variations

Classes that can be applied to <ol> tag:

class="relativeWidth"

This make the active-item background taking his content width (relative to its content)

class="stickyPosition"

This make the the navigation block sticky.

A top position has been applied on the element directly because depending on the page strucutre, this need to be updated. For example, on the terms and conditions page, the top position is 16rem because we have the header and the main-title that is in position fixed.

The navigation is clickable. There's also a way to navigate and share each section with the URL. Each title is dynamically (by js) converted as a slug that can be used as anchor. The hash is changing dynamically in the URL when clicking and scrolling to an article in order to share it by copy/paste from the URL bar (www.whatever.com/table-of-content#my-article)

So to access direclty the Droits de l'Entreprise partagée section, you can simply add #droits-de-lentreprise-partagee to the URL (slug removes accents, special characters and spaces)

Example:

Article 1

Objet du contrat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Article 2

Définitions

Article 3

Le titulaire

Article 4

L'entreprise partagée

Article 5

Création et vie d'une Activité

Article 6

Droits de l'Entreprise partagée

Article 7

Droits du Titulaire

Article 8

Exclusion

Article 9

Droit et attribution de compétence

Article 10

Conclusion

<div class="c-table-of-content c-content">
    <nav class="c-table-of-content-navigation fixed" id="table-of-content-nav" role="navigation" aria-label="Table of content">
        <ol class="c-table-of-content__nav relativeWidth stickyPosition" style="top: 3rem;">
            <li>
                <a class="c-table-of-content__nav__item" href="#section1" aria-selected="true">Objet du contrat</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section2">Définitions</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section3">Le titulaire</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section4">L'entreprise partagée</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section5">Création et vie d'une Activité</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section6">Droits de l'Entreprise partagée</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section7">Droits du Titulaire</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section8">Exclusion</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section9">Droit et attribution de compétence</a>
            </li>
            <li>
                <a class="c-table-of-content__nav__item" href="#section10">Conclusion</a>
            </li>
            <div class="current-state" aria-hidden="true"></div>
        </ol>
    </nav>
    <div class="c-table-of-content__content">
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section1">
            <p class="c-body-2 u-spacer-bottom-s">Article 1</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Objet du contrat</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section2">
            <p class="c-body-2 u-spacer-bottom-s">Article 2</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Définitions</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section3">
            <p class="c-body-2 u-spacer-bottom-s">Article 3</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Le titulaire</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section4">
            <p class="c-body-2 u-spacer-bottom-s">Article 4</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> L'entreprise partagée</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section5">
            <p class="c-body-2 u-spacer-bottom-s">Article 5</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Création et vie d'une Activité</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section6">
            <p class="c-body-2 u-spacer-bottom-s">Article 6</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Droits de l'Entreprise partagée</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section7">
            <p class="c-body-2 u-spacer-bottom-s">Article 7</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Droits du Titulaire</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section8">
            <p class="c-body-2 u-spacer-bottom-s">Article 8</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Exclusion</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section9">
            <p class="c-body-2 u-spacer-bottom-s">Article 9</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Droit et attribution de compétence</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <section class="c-table-of-content__content__item u-spacer-bottom-xl u-padding-bottom-s" id="section10">
            <p class="c-body-2 u-spacer-bottom-s">Article 10</p>
            <h2 class="c-h3 u-spacer-bottom-xs"> Conclusion</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
        </section>
        <div class="back-to-top">
            <button class="c-button c-button--secondary c-button--icon u-shadow-10">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-arrow-up  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289L18.7071 10.2929C19.0976 10.6834 19.0976 11.3166 18.7071 11.7071C18.3166 12.0976 17.6834 12.0976 17.2929 11.7071L13 7.41421L13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19L11 7.41421L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071C4.90237 11.3166 4.90237 10.6834 5.29289 10.2929L11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">Back to table of content</div>
                </span>
            </button>
        </div>
    </div>
    <script>
        window.addEventListener('load', (event) => {
            class Toc {
                constructor(el) {
                    this.el = el;
                    this.toc__nav__list = this.el.querySelector(".c-table-of-content__nav");
                    this.toc__nav__list__items = this.el.querySelectorAll("a.c-table-of-content__nav__item");
                    this.toc__content__list = document.querySelector(".c-table-of-content__content");
                    this.toc__content__list__items = document.querySelectorAll(".c-table-of-content__content__item");
                    this.current__index = 0;
                    this.current_state = this.el.querySelector(".current-state");
                    this.relativeWidth = (this.toc__nav__list.classList.contains('relativeWidth')) ? true : false;
                    this.toc__back_to_top_btn = this.el.querySelector(".back-to-top");
                    this.toc__back_to_top_btn__link = this.toc__back_to_top_btn.querySelector("button");
                    this.toc__back_to_top_btn__visible = false;
                    this.el_init_top = this.el.offsetTop;
                    this.elPaddingTop = parseFloat(window.getComputedStyle(this.el, null).getPropertyValue('padding-top'));
                    this.toc__content__list__items__posTop_from_parent = [];
                    this.lastScrollTop = 0;
                    this.lastScrollTopd = 0;
                    this.currentUrl = window.location.href.split("#")[0];
                    this.whatever = this.callBackScrollEvent.bind(this, el);
                    this.whateverHash = this.callBackHashEvent.bind(this, el);
                    this.init();
                }

                init() {
                    this.current_nav_item = this.toc__nav__list.querySelector("[aria-selected]");
                    this.toc__back_to_top_btn.style.display = 'none';

                    //- Set current item selected             
                    let current_index = [...this.toc__nav__list__items].indexOf(this.current_nav_item);

                    this.toc__nav__list__items.forEach((table_of_content__item, i) => {
                        // Attach events to the toc__nav__list__items if the table_of_content__item have toc__content. Otherwise they just act as links
                        table_of_content__item.setAttribute('data-id', this.convertToSlug(table_of_content__item.textContent));
                        this.toc__content__list__items[i].setAttribute('data-id', this.convertToSlug(table_of_content__item.textContent));
                        if (this.toc__content__list__items.length) this.attachClickEvents(table_of_content__item, i);

                        if (i === this.toc__nav__list__items.length - 1) {
                            this.callbackItemsSet(current_index, this.current_nav_item);
                        }
                    });

                    this.toc__back_to_top_btn__link.addEventListener("click", (e) => {
                        e.preventDefault();
                        this.scrollTo(this.toc__nav__list);
                    });
                    window.addEventListener('hashchange', this.whateverHash);
                }

                attachClickEvents(table_of_content__item, i) {
                    // Handle clicking of toc__items for mouse users
                    table_of_content__item.addEventListener("click", (e) => {
                        e.preventDefault();
                        e.currentTarget.classList.add("clicked");
                        window.removeEventListener("scroll", this.whatever);
                        window.removeEventListener("hashchange", this.whateverHash);
                        let currentToc = this.toc__nav__list.querySelector("[aria-selected]");
                        this.switchTocAfterClick(currentToc, e.currentTarget);
                    });
                }

                attachScrollEvents() {
                    window.addEventListener("scroll", this.whatever);
                }

                callBackScrollEvent(el) {
                    let toc__posTop_from_viewport = this.el.getBoundingClientRect().top - this.el_init_top - 26 - 50; // To edit from page to page
                    let window__posTop_from_viewport = window.scrollY;
                    var st = window.pageYOffset || document.documentElement.scrollTop;

                    //- Handling back-to-top btn
                    if ((-this.el.getBoundingClientRect().top) > this.toc__nav__list.clientHeight) {
                        if (this.toc__back_to_top_btn__visible === false) {
                            this.fadeIn(this.toc__back_to_top_btn);
                            this.toc__back_to_top_btn__visible = true;
                        }
                    } else {
                        if (this.toc__back_to_top_btn__visible === true) {
                            this.fadeOut(this.toc__back_to_top_btn);
                            this.toc__back_to_top_btn__visible = false;
                        }
                    }

                    var std = window.pageYOffset || document.documentElement.scrollTop;
                    let index_scroll = 1;
                    if (std > this.lastScrollTop) { // downscroll
                        index_scroll = -1;
                    } else { // upscroll
                        index_scroll = 1;
                    }
                    this.lastScrollTop = std <= 0 ? 0 : std;


                    //- Handling active states on scroll
                    for (let i = 0; i < this.toc__content__list__items__posTop_from_parent.length; i++) {
                        if ((-toc__posTop_from_viewport) > this.toc__content__list__items__posTop_from_parent[i] && (-toc__posTop_from_viewport) < this.toc__content__list__items__posTop_from_parent[i + 1]) {
                            if (this.current__index != this.toc__nav__list__items[i]) {
                                window.removeEventListener("hashchange", this.whateverHash);
                                this.resetActiveToc(this.toc__nav__list__items[i], this.toc__content__list__items[i]);
                                var that = this;
                                setTimeout(function() {
                                    window.addEventListener("hashchange", that.whateverHash);
                                }, 750);
                            }
                        }
                    }

                }

                callBackHashEvent(el) {
                    let hash = window.top.location.hash.substr(1);
                    if (hash.length) {
                        window.removeEventListener("scroll", this.whatever);
                        let current_hash_content_item = this.toc__content__list.querySelector('[data-id="' + hash + '"]');
                        this.resetActiveToc(this.toc__nav__list.querySelector('[data-id="' + hash + '"]'), current_hash_content_item);
                        this.scrollTo(current_hash_content_item);
                        var that = this;
                        setTimeout(function() {
                            window.addEventListener("scroll", that.whatever);
                        }, 750);
                    }
                }

                callbackItemsSet(current_index, current_nav_item) {

                    this.toc__nav__list__items.forEach((table_of_content__item, i) => {
                        this.toc__content__list__items__posTop_from_parent.push(Math.round(this.toc__content__list__items[i].offsetTop));
                    });

                    //- Get # Hashtag from url (ex: lentreprise-partage)
                    let hash = window.top.location.hash.substr(1);
                    if (hash.length) {
                        let current_hash_content_item = this.toc__content__list.querySelector('[data-id="' + hash + '"]');
                        let current_hash_index = [...this.toc__content__list__items].indexOf(current_hash_content_item);
                        this.resetActiveToc(this.toc__nav__list.querySelector('[data-id="' + hash + '"]'), current_hash_content_item);
                        this.scrollTo(this.toc__content__list__items[current_hash_index]);
                    } else {
                        this.resetActiveToc(current_nav_item, this.toc__content__list__items[current_index]);
                        this.scrollTo(this.toc__content__list__items[current_index]);
                    }
                    var that = this;
                    setTimeout(function() {
                        that.attachScrollEvents()
                    }, 750);

                }

                resetActiveToc(newTocNavItem, newTocContentItem) {
                    this.positionTopCurrentState(newTocNavItem);

                    window.location.hash = this.convertToSlug(newTocNavItem.textContent);

                    for (let i = 0; i < this.toc__nav__list__items.length; i++) {
                        this.toc__nav__list__items[i].removeAttribute("aria-selected");
                    }
                    for (let j = 0; j < this.toc__content__list__items.length; j++) {
                        this.toc__content__list__items[j].classList.remove("active");
                    }
                    if (newTocNavItem) newTocNavItem.setAttribute("aria-selected", "true");
                    if (newTocContentItem) newTocContentItem.classList.add("active");
                    this.current__index = newTocNavItem;
                }

                switchTocAfterClick(oldTocNavItem, newTocNavItem) {
                    newTocNavItem.focus();

                    let index = [...this.toc__nav__list__items].indexOf(newTocNavItem);
                    this.resetActiveToc(newTocNavItem, this.toc__content__list__items[index]);
                    this.scrollTo(this.toc__content__list__items[index]);
                    var that = this;
                    setTimeout(function() {
                        newTocNavItem.classList.remove("clicked");
                    }, 400);
                    setTimeout(function() {
                        window.addEventListener("scroll", that.whatever);
                        window.addEventListener("hashchange", that.whateverHash);
                    }, 750);
                }

                positionTopCurrentState(child) {
                    // Position of the blue background
                    let table_of_content_Y = this.toc__nav__list.getBoundingClientRect().top;
                    if (child) {
                        let itemHeight = child.clientHeight;
                        let relativePosTop = child.getBoundingClientRect().top - table_of_content_Y;
                        this.current_state.style.top = relativePosTop + 'px';
                        this.current_state.style.height = itemHeight + 'px';
                        if (this.relativeWidth) {
                            let childWidth = child.offsetWidth;
                            this.current_state.style.width = childWidth + 'px';
                        }
                    }
                }

                scrollTo(element) {
                    let parentPosition = this.el.getBoundingClientRect().top + window.scrollY;
                    let index = [...this.toc__content__list__items].indexOf(element);
                    let gap = (index === 0) ? this.elPaddingTop + 35 : this.elPaddingTop + 35; // custom values from fixed elements
                    let elementPosition = element.offsetTop + (parentPosition - gap);
                    window.scrollTo({
                        top: elementPosition,
                        behavior: "smooth"
                    });
                }

                convertToSlug(str) {
                    str = str.replace(/^\s+|\s+$/g, ''); // trim
                    str = str.toLowerCase();

                    // remove accents, swap ñ for n, etc
                    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
                    var to = "aaaaeeeeiiiioooouuuunc------";
                    for (var i = 0, l = from.length; i < l; i++) {
                        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
                    }

                    str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
                        .replace(/\s+/g, '-') // collapse whitespace and replace by -
                        .replace(/-+/g, '-'); // collapse dashes

                    return str;
                }

                fadeOut(el) {
                    el.style.opacity = 1;
                    (function fade() {
                        if ((el.style.opacity -= .1) < 0) {
                            el.style.display = "none";
                        } else {
                            requestAnimationFrame(fade);
                        }
                    })();
                };

                fadeIn(el, display) {
                    el.style.opacity = 0;
                    el.style.display = display || "block";
                    (function fade() {
                        var val = parseFloat(el.style.opacity);
                        if (!((val += .1) > 1)) {
                            el.style.opacity = val;
                            requestAnimationFrame(fade);
                        }
                    })();
                };
            }

            const toclists = document.querySelectorAll(".c-table-of-content");

            if (toclists.length) {
                [...toclists].map((toclist) => new Toc(toclist));
            }
        });
    </script>
</div>

div.c-table-of-content.c-content
    nav.c-table-of-content-navigation.fixed#table-of-content-nav(role="navigation" aria-label="Table of content")
        ol.c-table-of-content__nav.relativeWidth.stickyPosition(style="top: 3rem;")
            li
                a.c-table-of-content__nav__item(href='#section1' aria-selected="true") Objet du contrat
            li
                a.c-table-of-content__nav__item(href='#section2') Définitions
            li
                a.c-table-of-content__nav__item(href='#section3') Le titulaire
            li
                a.c-table-of-content__nav__item(href='#section4') L'entreprise partagée
            li
                a.c-table-of-content__nav__item(href='#section5') Création et vie d'une Activité
            li
                a.c-table-of-content__nav__item(href='#section6') Droits de l'Entreprise partagée
            li
                a.c-table-of-content__nav__item(href='#section7') Droits du Titulaire
            li
                a.c-table-of-content__nav__item(href='#section8') Exclusion
            li
                a.c-table-of-content__nav__item(href='#section9') Droit et attribution de compétence
            li
                a.c-table-of-content__nav__item(href='#section10') Conclusion
            .current-state(aria-hidden="true")

    div.c-table-of-content__content
        section#section1.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 1
            h2.c-h3.u-spacer-bottom-xs  Objet du contrat
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section2.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 2
            h2.c-h3.u-spacer-bottom-xs  Définitions
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section3.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 3
            h2.c-h3.u-spacer-bottom-xs  Le titulaire
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section4.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 4
            h2.c-h3.u-spacer-bottom-xs  L'entreprise partagée
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section5.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 5
            h2.c-h3.u-spacer-bottom-xs  Création et vie d'une Activité
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section6.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 6
            h2.c-h3.u-spacer-bottom-xs  Droits de l'Entreprise partagée
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section7.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 7
            h2.c-h3.u-spacer-bottom-xs  Droits du Titulaire
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section8.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 8
            h2.c-h3.u-spacer-bottom-xs  Exclusion
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section9.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 9
            h2.c-h3.u-spacer-bottom-xs  Droit et attribution de compétence
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        section#section10.c-table-of-content__content__item.u-spacer-bottom-xl.u-padding-bottom-s
            p.c-body-2.u-spacer-bottom-s Article 10
            h2.c-h3.u-spacer-bottom-xs  Conclusion
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
        .back-to-top
            button.c-button.c-button--secondary.c-button--icon.u-shadow-10
                span.c-button__content
                    +icon('arrow-up')
                    .u-sr-accessible Back to table of content
    
    script.
        window.addEventListener('load', (event) => {
            class Toc {
                constructor(el) {
                    this.el = el;
                    this.toc__nav__list = this.el.querySelector(".c-table-of-content__nav");
                    this.toc__nav__list__items = this.el.querySelectorAll("a.c-table-of-content__nav__item");
                    this.toc__content__list = document.querySelector(".c-table-of-content__content");
                    this.toc__content__list__items = document.querySelectorAll(".c-table-of-content__content__item");
                    this.current__index = 0;
                    this.current_state = this.el.querySelector(".current-state");
                    this.relativeWidth = (this.toc__nav__list.classList.contains('relativeWidth')) ? true : false;
                    this.toc__back_to_top_btn = this.el.querySelector(".back-to-top");
                    this.toc__back_to_top_btn__link = this.toc__back_to_top_btn.querySelector("button");
                    this.toc__back_to_top_btn__visible = false;
                    this.el_init_top = this.el.offsetTop;
                    this.elPaddingTop = parseFloat(window.getComputedStyle(this.el, null).getPropertyValue('padding-top'));
                    this.toc__content__list__items__posTop_from_parent = [];
                    this.lastScrollTop = 0;
                    this.lastScrollTopd = 0;
                    this.currentUrl = window.location.href.split("#")[0];
                    this.whatever = this.callBackScrollEvent.bind(this, el);
                    this.whateverHash = this.callBackHashEvent.bind(this, el);
                    this.init();
                }

                init() {
                    this.current_nav_item = this.toc__nav__list.querySelector("[aria-selected]");
                    this.toc__back_to_top_btn.style.display = 'none';

                    //- Set current item selected             
                    let current_index = [...this.toc__nav__list__items].indexOf(this.current_nav_item);

                    this.toc__nav__list__items.forEach((table_of_content__item, i) => {
                        // Attach events to the toc__nav__list__items if the table_of_content__item have toc__content. Otherwise they just act as links
                        table_of_content__item.setAttribute('data-id', this.convertToSlug(table_of_content__item.textContent));
                        this.toc__content__list__items[i].setAttribute('data-id', this.convertToSlug(table_of_content__item.textContent));
                        if (this.toc__content__list__items.length) this.attachClickEvents(table_of_content__item, i);
                        
                        if(i === this.toc__nav__list__items.length-1) {
                            this.callbackItemsSet(current_index, this.current_nav_item);
                        }
                    });

                    this.toc__back_to_top_btn__link.addEventListener("click", (e) => {
                        e.preventDefault();
                        this.scrollTo(this.toc__nav__list);
                    });
                    window.addEventListener('hashchange', this.whateverHash);
                }

                attachClickEvents(table_of_content__item, i) {
                    // Handle clicking of toc__items for mouse users
                    table_of_content__item.addEventListener("click", (e) => {
                        e.preventDefault();
                        e.currentTarget.classList.add("clicked");
                        window.removeEventListener("scroll", this.whatever);
                        window.removeEventListener("hashchange", this.whateverHash);
                        let currentToc = this.toc__nav__list.querySelector("[aria-selected]");
                        this.switchTocAfterClick(currentToc, e.currentTarget);
                    });
                }

                attachScrollEvents(){
                    window.addEventListener("scroll", this.whatever);
                }

                callBackScrollEvent(el){
                    let toc__posTop_from_viewport =  this.el.getBoundingClientRect().top  - this.el_init_top - 26 - 50; // To edit from page to page
                    let window__posTop_from_viewport = window.scrollY;
                    var st = window.pageYOffset || document.documentElement.scrollTop; 

                    //- Handling back-to-top btn
                    if((- this.el.getBoundingClientRect().top) > this.toc__nav__list.clientHeight){
                        if(this.toc__back_to_top_btn__visible === false){
                            this.fadeIn(this.toc__back_to_top_btn);
                            this.toc__back_to_top_btn__visible = true;
                        }
                    }else{
                        if(this.toc__back_to_top_btn__visible === true){
                            this.fadeOut(this.toc__back_to_top_btn);
                            this.toc__back_to_top_btn__visible = false;
                        }
                    }

                    var std = window.pageYOffset || document.documentElement.scrollTop;
                    let index_scroll = 1;
                    if (std > this.lastScrollTop){ // downscroll
                        index_scroll = -1;
                    } else { // upscroll
                        index_scroll = 1; }
                    this.lastScrollTop = std <= 0 ? 0 : std;


                    //- Handling active states on scroll
                    for (let i = 0; i < this.toc__content__list__items__posTop_from_parent.length; i++) {
                        if ((- toc__posTop_from_viewport) > this.toc__content__list__items__posTop_from_parent[i] && (- toc__posTop_from_viewport) < this.toc__content__list__items__posTop_from_parent[i+1]) {
                            if(this.current__index != this.toc__nav__list__items[i]){
                                window.removeEventListener("hashchange", this.whateverHash);
                                this.resetActiveToc( this.toc__nav__list__items[i], this.toc__content__list__items[i]);
                                var that = this;
                                setTimeout(function(){ 
                                    window.addEventListener("hashchange", that.whateverHash);
                                }, 750);
                            }
                        }
                    }
                    
                }

                callBackHashEvent(el){
                    let hash = window.top.location.hash.substr(1);
                    if(hash.length){
                        window.removeEventListener("scroll", this.whatever);
                        let current_hash_content_item = this.toc__content__list.querySelector('[data-id="' + hash + '"]');
                        this.resetActiveToc(this.toc__nav__list.querySelector('[data-id="' + hash + '"]'), current_hash_content_item);
                        this.scrollTo(current_hash_content_item);
                        var that = this;
                        setTimeout(function(){ 
                            window.addEventListener("scroll", that.whatever);
                        }, 750);
                    }
                }

                callbackItemsSet(current_index, current_nav_item ) { 

                    this.toc__nav__list__items.forEach((table_of_content__item, i) => {
                        this.toc__content__list__items__posTop_from_parent.push(Math.round(this.toc__content__list__items[i].offsetTop));
                    });

                    //- Get # Hashtag from url (ex: lentreprise-partage)
                    let hash = window.top.location.hash.substr(1);
                    if(hash.length){
                        let current_hash_content_item = this.toc__content__list.querySelector('[data-id="' + hash + '"]');
                        let current_hash_index = [...this.toc__content__list__items].indexOf(current_hash_content_item);
                        this.resetActiveToc(this.toc__nav__list.querySelector('[data-id="' + hash + '"]'), current_hash_content_item);
                        this.scrollTo(this.toc__content__list__items[current_hash_index]);
                    }else{
                        this.resetActiveToc(current_nav_item, this.toc__content__list__items[current_index]);
                        this.scrollTo(this.toc__content__list__items[current_index]);
                    }
                    var that = this;
                    setTimeout(function(){ 
                        that.attachScrollEvents()
                    }, 750);

                }

                resetActiveToc(newTocNavItem, newTocContentItem){
                    this.positionTopCurrentState(newTocNavItem);

                    window.location.hash = this.convertToSlug(newTocNavItem.textContent);
                    
                    for (let i = 0; i < this.toc__nav__list__items.length; i++) {
                        this.toc__nav__list__items[i].removeAttribute("aria-selected");
                    }
                    for (let j = 0; j < this.toc__content__list__items.length; j++) {
                        this.toc__content__list__items[j].classList.remove("active");
                    }
                    if (newTocNavItem) newTocNavItem.setAttribute("aria-selected", "true");
                    if (newTocContentItem) newTocContentItem.classList.add("active");
                    this.current__index = newTocNavItem;
                }

                switchTocAfterClick(oldTocNavItem, newTocNavItem) {
                    newTocNavItem.focus();
                    
                    let index = [...this.toc__nav__list__items].indexOf(newTocNavItem);
                    this.resetActiveToc(newTocNavItem, this.toc__content__list__items[index]);
                    this.scrollTo(this.toc__content__list__items[index]);
                    var that = this;
                    setTimeout(function(){ 
                        newTocNavItem.classList.remove("clicked");
                    }, 400);
                    setTimeout(function(){ 
                        window.addEventListener("scroll", that.whatever);
                        window.addEventListener("hashchange", that.whateverHash);
                    }, 750);
                }

                positionTopCurrentState(child) {
                    // Position of the blue background
                    let table_of_content_Y = this.toc__nav__list.getBoundingClientRect().top;
                    if(child){
                        let itemHeight = child.clientHeight;
                        let relativePosTop =  child.getBoundingClientRect().top  - table_of_content_Y;
                        this.current_state.style.top = relativePosTop + 'px';
                        this.current_state.style.height = itemHeight + 'px';
                        if(this.relativeWidth){
                            let childWidth =  child.offsetWidth;
                            this.current_state.style.width = childWidth + 'px';
                        }
                    }
                }

                scrollTo(element) {
                    let parentPosition = this.el.getBoundingClientRect().top + window.scrollY;
                    let index = [...this.toc__content__list__items].indexOf(element);
                    let gap = (index === 0) ? this.elPaddingTop + 35 : this.elPaddingTop + 35; // custom values from fixed elements
                    let elementPosition = element.offsetTop + (parentPosition - gap);
                    window.scrollTo({
                        top: elementPosition,
                        behavior: "smooth"
                    });
                }

                convertToSlug(str) {
                    str = str.replace(/^\s+|\s+$/g, ''); // trim
                    str = str.toLowerCase();
                
                    // remove accents, swap ñ for n, etc
                    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
                    var to   = "aaaaeeeeiiiioooouuuunc------";
                    for (var i=0, l=from.length ; i<l ; i++) {
                        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
                    }

                    str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
                        .replace(/\s+/g, '-') // collapse whitespace and replace by -
                        .replace(/-+/g, '-'); // collapse dashes

                    return str;
                }

                fadeOut(el) {
                    el.style.opacity = 1;
                    (function fade() {
                        if ((el.style.opacity -= .1) < 0) {
                            el.style.display = "none";
                        } else {
                            requestAnimationFrame(fade);
                        }
                    })();
                };

                fadeIn(el, display) {
                    el.style.opacity = 0;
                    el.style.display = display || "block";
                    (function fade() {
                        var val = parseFloat(el.style.opacity);
                        if (!((val += .1) > 1)) {
                            el.style.opacity = val;
                            requestAnimationFrame(fade);
                        }
                    })();
                };
            }
            
            const toclists = document.querySelectorAll(".c-table-of-content");

            if (toclists.length) {
                [...toclists].map((toclist) => new Toc(toclist));
            }
        });

Component documentation

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Table of content

Table of content with content and interactive

Variations

Navigation

Example:

Objet du contrat

Définitions

Le titulaire

L'entreprise partagée

Création et vie d'une Activité

Droits de l'Entreprise partagée

Droits du Titulaire

Exclusion

Droit et attribution de compétence

Conclusion