🔽 TLD - tld_collapsed - Composant de Contenu Repliable

📖 Introduction

tld_collapsed est un Web Component qui permet d'afficher ou de masquer du contenu avec une animation fluide.
Il supporte :

• L'expansion verticale ou horizontale
• Un mode ouvert par défaut
• Des contrôles JavaScript (open(), close(), toggle())

---

⚡️ Installation / Prérequis

Ajoutez le fichier CSS :

<link rel="stylesheet" href="7_index.css">

---

🚀 Utilisation

🔹 Composant de Base

<tld-collapsed>
    <p>Ce contenu peut être caché ou affiché.</p>
</tld-collapsed>

<button onclick="document.querySelector('tld-collapsed').toggle()">Toggle</button>

🔹 Mode Vertical

<tld-collapsed vertical>
    <p>Ce contenu se replie horizontalement.</p>
</tld-collapsed>

🔹 Ouvrir par Défaut

<tld-collapsed open>
    <p>Ce contenu est visible dès le chargement.</p>
</tld-collapsed>

🔹 Contrôle JavaScript

const collapsible = document.querySelector("tld-collapsed");

collapsible.open();
collapsible.close();
collapsible.toggle();
console.log("Est ouvert :", collapsible.etat());

---

🎨 Style CSS

Ajoutez ce fichier CSS (7_index.css) :

tld-collapsed {
    display: block;
    overflow: hidden;
    transition: max-height 0.5s linear;
}

---

📌 Détails du Code

🏗️ Classe

class tld_collapsed extends tld_custom_elements {
    public _vertical: boolean = false;
    public _etat: boolean = false;
    public _open: boolean;

    constructor(Attributes: { [name: string]: any } = null) {
        super(Attributes);
    }

    render() {
        if (this._vertical) {
            this.style.maxWidth = this._open ? this.scrollWidth + "px" : "0px";
        } else {
            this.style.maxHeight = this._open ? this.scrollHeight + "px" : "0px";
        }
    }
}

---

🎨 Méthodes Clés

🔄 open()

open() {
    this._etat = true;
    if (this._vertical) {
        this.style.maxWidth = this.scrollWidth + "px";
    } else {
        this.style.maxHeight = this.scrollHeight + "px";
    }
}

❌ close()

close() {
    this._etat = false;
    if (this._vertical) {
        this.style.maxWidth = "0px";
    } else {
        this.style.maxHeight = "0px";
    }
}

🔀 toggle()

toggle() {
    this._etat ? this.close() : this.open();
}

🔍 etat()

etat() {
    return this._etat;
}

---

📚 Exemples et Cas Pratiques

📌 Ajout Dynamique

const collapsible = document.createElement("tld-collapsed");
collapsible.innerHTML = "<p>Texte caché par défaut</p>";
document.body.appendChild(collapsible);

📌 Ouvrir/Fermer avec un Bouton

<tld-collapsed id="collapse1">
    <p>Contenu caché</p>
</tld-collapsed>

<button onclick="document.getElementById('collapse1').toggle()">Toggle</button>

📌 Vérifier l'État

if (collapsible.etat()) {
    console.log("Le contenu est visible");
} else {
    console.log("Le contenu est caché");
}

---

🎯 Conclusion

tld_collapsed est un Web Component simple et efficace pour gérer des contenus repliables avec des animations fluides.
Il permet une intégration facile et une utilisation flexible.