• 11-02-2022, 09:46:13
    #1
    Arkadaşlar Table of contents (İçerik Listesi) alanım var. Bu kısıma gizle göster butonu yapmak istiyorum.
    Bu konuda destek olacak arkadaşımız varmı dır acaba?

    Html kodu alt kısımda;
                            <nav class="alert alert-simple alert-primary alert-icon table-of-contents">
                            <span class="title title-sm title-line title-underline"><span><i class="d-icon-mode-list"></i> İçerik Listesi</span></span>
                                </nav>
    Js kodu alt kısımda;
    class TableOfContents {
        constructor({ from: e, to: t }) {
            (this.fromElement = e), (this.toElement = t), (this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6")), (this.tocElement = document.createElement("div"));
        }
        getMostImportantHeadingLevel() {
            let e = 6;
            for (let t = 0; t < this.headingElements.length; t++) {
                let n = TableOfContents.getHeadingLevel(this.headingElements[t]);
                e = n < e ? n : e;
            }
            return e;
        }
        static generateId(e) {
            return e.textContent.replace(/\s+/g, "_");
        }
        static getHeadingLevel(e) {
            switch (e.tagName.toLowerCase()) {
                case "h1":
                    return 1;
                case "h2":
                    return 2;
                case "h3":
                    return 3;
                case "h4":
                    return 4;
                case "h5":
                    return 5;
                case "h6":
                    return 6;
                default:
                    return 1;
            }
        }
        generateToc() {
            let e = this.getMostImportantHeadingLevel() - 1,
                t = this.tocElement;
            for (let n = 0; n < this.headingElements.length; n++) {
                let l = this.headingElements[n],
                    a = TableOfContents.getHeadingLevel(l),
                    r = a - e,
                    o = document.createElement("a");
                if ((l.id || (l.id = TableOfContents.generateId(l)), (o.href = `#${l.id}`), (o.textContent = l.textContent), r > 0)) {
                    for (let e = 0; e < r; e++) {
                        let e = document.createElement("ol"),
                            n = document.createElement("li");
                        e.appendChild(n), t.appendChild(e), (t = n);
                    }
                    t.appendChild(o);
                } else {
                    for (let e = 0; e < -r; e++) t = t.parentNode.parentNode;
                    let e = document.createElement("li");
                    e.appendChild(o), t.parentNode.appendChild(e), (t = e);
                }
                e = a;
            }
            this.toElement.appendChild(this.tocElement.firstChild);
        }
    }
    document.addEventListener("DOMContentLoaded", () => new TableOfContents({ from: document.querySelector(".article"), to: document.querySelector(".table-of-contents") }).generateToc());
  • 11-02-2022, 09:53:08
    #2
    Foxi adlı üyeden alıntı: mesajı görüntüle
    Arkadaşlar Table of contents (İçerik Listesi) alanım var. Bu kısıma gizle göster butonu yapmak istiyorum.
    Bu konuda destek olacak arkadaşımız varmı dır acaba?

    Html kodu alt kısımda;
                            <nav class="alert alert-simple alert-primary alert-icon table-of-contents">
                            <span class="title title-sm title-line title-underline"><span><i class="d-icon-mode-list"></i> İçerik Listesi</span></span>
                                </nav>
    Js kodu alt kısımda;
    class TableOfContents {
        constructor({ from: e, to: t }) {
            (this.fromElement = e), (this.toElement = t), (this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6")), (this.tocElement = document.createElement("div"));
        }
        getMostImportantHeadingLevel() {
            let e = 6;
            for (let t = 0; t < this.headingElements.length; t++) {
                let n = TableOfContents.getHeadingLevel(this.headingElements[t]);
                e = n < e ? n : e;
            }
            return e;
        }
        static generateId(e) {
            return e.textContent.replace(/\s+/g, "_");
        }
        static getHeadingLevel(e) {
            switch (e.tagName.toLowerCase()) {
                case "h1":
                    return 1;
                case "h2":
                    return 2;
                case "h3":
                    return 3;
                case "h4":
                    return 4;
                case "h5":
                    return 5;
                case "h6":
                    return 6;
                default:
                    return 1;
            }
        }
        generateToc() {
            let e = this.getMostImportantHeadingLevel() - 1,
                t = this.tocElement;
            for (let n = 0; n < this.headingElements.length; n++) {
                let l = this.headingElements[n],
                    a = TableOfContents.getHeadingLevel(l),
                    r = a - e,
                    o = document.createElement("a");
                if ((l.id || (l.id = TableOfContents.generateId(l)), (o.href = `#${l.id}`), (o.textContent = l.textContent), r > 0)) {
                    for (let e = 0; e < r; e++) {
                        let e = document.createElement("ol"),
                            n = document.createElement("li");
                        e.appendChild(n), t.appendChild(e), (t = n);
                    }
                    t.appendChild(o);
                } else {
                    for (let e = 0; e < -r; e++) t = t.parentNode.parentNode;
                    let e = document.createElement("li");
                    e.appendChild(o), t.parentNode.appendChild(e), (t = e);
                }
                e = a;
            }
            this.toElement.appendChild(this.tocElement.firstChild);
        }
    }
    document.addEventListener("DOMContentLoaded", () => new TableOfContents({ from: document.querySelector(".article"), to: document.querySelector(".table-of-contents") }).generateToc());
    Gizle göster yapacağın alana id ver, daha sonra gizle göster işlemini butona tıklama ile yapacaksan, javascript ile verdiğin idye click yapıldığı zaman display özelliğini none yapacaksın
  • 11-02-2022, 12:05:33
    #3
    gurbuzemre adlı üyeden alıntı: mesajı görüntüle
    Gizle göster yapacağın alana id ver, daha sonra gizle göster işlemini butona tıklama ile yapacaksan, javascript ile verdiğin idye click yapıldığı zaman display özelliğini none yapacaksın
    anladım hocam teşekkürler.