Sujet Précédent Sujet Suivant

Faire apparaitre et disparaitre des sections dans un HTML

Résolu/Fermé
GemaKuroNekoChan Messages postés 2 Date d'inscription dimanche 26 février 2023 Statut Membre Dernière intervention 26 février 2023 - 26 févr. 2023 à 08:57
GemaKuroNekoChan Messages postés 2 Date d'inscription dimanche 26 février 2023 Statut Membre Dernière intervention 26 février 2023 - 26 févr. 2023 à 16:12

Bonjour,

Je suis actuellement en train de coder une fiche de personnage pour une partie personnalisée sur Roll20 (pour ceux qui ne connaissent pas c'est un site qui permet de jouer à des jeux de rôles sur table mais en ligne, comme par exemple Donjons & Dragons 5).

N'ayant aucune connaissance en HTML je m'aide d'un tutoriel, mais à présent je bloque sur une chose ... Le tutoriel montre comment cacher et afficher un élément particulier, comme une image ou une ligne de texte. Mais impossible de trouver un tutoriel similaire pour afficher ou cacher une partie entière du document.

C'est pourquoi j'en viens à votre aide. Je dispose de 3 sections différentes que j'aimerais dans l'idéal afficher en fonction de boites à cocher (les rondes où on ne peut en choisir qu'une). Pour l'instant je les ai codées comme suit

<input type="radio" name="attr_choix">PJ
<input type="radio" name="attr_choix">PNJ
<input type="radio" name="attr_choix">Autre

Je met les 3 sections concernées dans le document ci-dessous

Section 1

<div id="PJ_sheet">
    <p>
        Nom <input name="attr_character_name" type="text" /><br />
        
        Race <input name="attr_Race" type="text" />
        Rang <input name="attr_Rang" type="text" />
        Niveau <input name="attr_Niveau" type="number" /><br />
        
        Pays <input name="attr_Pays" type="text" />
        Province <input name="attr_Province" type="text" />
        Ville <input name="attr_Ville" type="text" /><br />
        
        Date <input name="attr_Date" type="text" /><br />
        
        Taille <input name="attr_Taille" type="text" />
        Poids <input name="attr_Poids" type="text" />
        Age <input name="attr_Age" type="text" />
    </p>

    <hr />

    <h3>CARACTERISTIQUES</h3>

    <table style="border-collapse: collapse; width: 100%;" border="1">
    <tbody>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Attaque" type="number" /> <button name="" type="roll" value="Attaque : [[1d20+@{Attaque}]]">ATTAQUE</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_D&eacute;fense" type="number" /> <button name="" type="roll" value="D&eacute;fense : [[1d20+@{D&eacute;fense}]]">DEFENSE</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Vie" type="number" /> <button name="" type="roll" value="Vie : [[1d20+@{Vie}]]">VIE</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_Arcane" type="number" /> <button name="" type="roll" value="Arcane : [[1d20+@{Arcane}]]">ARCANE</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Corps" type="number" /> <button name="" type="roll" value="Corps : [[1d20+@{Corps}]]">CORPS</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_Esprit" type="number" /> <button name="" type="roll" value="Esprit : [[1d20+@{Esprit}]]">ESPRIT</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Perception" type="number" /> <button name="" type="roll" value="Perception : [[1d20+@{Perception}]]">PERCEPTION</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_R&eacute;action" type="number" /> <button name="" type="roll" value="R&eacute;action : [[1d20+@{R&eacute;action}]]">REACTION</button></td>
    </tr>
    </tbody>
    </table>

    <hr />

    <p>
        VITALITE <input name="attr_Vitalit&eacute;" type="number" />
        <input name="attr_Vitalit&eacute;Temporaire" type="number" />
        <input name="attr_Vitalit&eacute;_max" type="number" /><br />
        
        EPUISEMENT <input name="attr_Epuisement" type="number" />
        <input name="attr_EpuisementTemporaire" type="number" />
        <input name="attr_Epuisement_max" type="number" />
    </p>

    <hr />

    <h3>ARGENT</h3>

    <p>
        EV <input name="attr_EclatVegaline" type="number" />
        EP <input name="attr_EclatPlatine" type="number" />
        ED <input name="attr_EclatDiamant" type="number" /><br />
        
        EO <input name="attr_EclatOr" type="number" />
        EA <input name="attr_EclatArgent" type="number" />
        EC <input name="attr_EclatCuivre" type="number" />
    </p>

    <hr />

    <h3>CAPACITES</h3>

    <p>
        <label for="attr_capa1">Capacit&eacute;s raciales</label>
    </p>
    <select id="attr_capa-select" name="attr_capacite">
        <option value="">--Choisissez une option--</option>
        <option value="Artificiel">Artificiel</option>
        <option value="Balayage">Balayage</option>
        <option value="BoucEmissaire">Bouc-Emissaire</option>
        <option value="Charge">Charge</option>
        <option value="Charme">Charme</option>
        <option value="Dard">Dard</option>
        <option value="Eveill&eacute;">Eveill&eacute;</option>
        <option value="Intrus">Intrus</option>
        <option value="M&eacute;tamorphose">M&eacute;tamorphose</option>
        <option value="Monture">Monture</option>
        <option value="Nyctalopie">Nyctalopie</option>
        <option value="Petit">Petit</option>
        <option value="Poison">Poison</option>
        <option value="Rage">Rage</option>
        <option value="Rationaliste">Rationaliste</option>
        <option value="Solide">Solide</option>
        <option value="Souffle">Souffle</option>
        <option value="T&eacute;l&eacute;portation">T&eacute;l&eacute;portation</option>
        <option value="Toxique">Toxique</option>
        <option value="Vol">Vol</option>
    </select>

    <select id="attr_capa-select2" name="attr_capacite2">
        <option value="">--Choisissez une option--</option>
        <option value="Artificiel">Artificiel</option>
        <option value="Balayage">Balayage</option>
        <option value="BoucEmissaire">Bouc-Emissaire</option>
        <option value="Charge">Charge</option>
        <option value="Charme">Charme</option>
        <option value="Dard">Dard</option>
        <option value="Eveill&eacute;">Eveill&eacute;</option>
        <option value="Intrus">Intrus</option>
        <option value="M&eacute;tamorphose">M&eacute;tamorphose</option>
        <option value="Monture">Monture</option>
        <option value="Nyctalopie">Nyctalopie</option>
        <option value="Petit">Petit</option>
        <option value="Poison">Poison</option>
        <option value="Rage">Rage</option>
        <option value="Rationaliste">Rationaliste</option>
        <option value="Solide">Solide</option>
        <option value="Souffle">Souffle</option>
        <option value="T&eacute;l&eacute;portation">T&eacute;l&eacute;portation</option>
        <option value="Toxique">Toxique</option>
        <option value="Vol">Vol</option>
    </select>

    <p>
        <input name="attr_Capa1" type="text" />
        <input name="attr_Capa2" type="text" /><br />
        
        <input name="attr_Capa3" type="text" />
        <input name="attr_Capa4" type="text" /><br />
        
        <input name="attr_Capa5" type="text" />
        <input name="attr_Capa6" type="text" />
    </p>

    <hr />

    <h3>INVENTAIRE</h3>

    <p>
        <label for="attr_inventaire"></label> <textarea id="attr_inv" cols="30" name="attr_Inventaire" rows="6"> </textarea>
    </p>

    <h3>NOTES</h3>

    <p>
        <label for="attr_notes"></label> <textarea id="attr_notes" cols="30" name="attr_notes" rows="6"> </textarea>
    </p>
</div>

Section 2

<div id="PNJ_sheet">
    <p>
        Nom <input name="attr_character_name" type="text" /><br />
        
        Race <input name="attr_Race" type="text" />
        Rang <input name="attr_Rang" type="text" />
        Niveau <input name="attr_Niveau" type="number" /><br />
        
        Pays <input name="attr_Pays" type="text" />
        Province <input name="attr_Province" type="text" />
        Ville <input name="attr_Ville" type="text" /><br />
        
        Date <input name="attr_Date" type="text" /><br />
        
        Taille <input name="attr_Taille" type="text" />
        Poids <input name="attr_Poids" type="text" />
        Age <input name="attr_Age" type="text" />
    </p>

    <hr />

    <h3>CARACTERISTIQUES</h3>

    <table style="border-collapse: collapse; width: 100%;" border="1">
    <tbody>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Attaque" type="number" /> <button name="" type="roll" value="Attaque : [[1d20+@{Attaque}]]">ATTAQUE</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_D&eacute;fense" type="number" /> <button name="" type="roll" value="D&eacute;fense : [[1d20+@{D&eacute;fense}]]">DEFENSE</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Vie" type="number" /> <button name="" type="roll" value="Vie : [[1d20+@{Vie}]]">VIE</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_Arcane" type="number" /> <button name="" type="roll" value="Arcane : [[1d20+@{Arcane}]]">ARCANE</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Corps" type="number" /> <button name="" type="roll" value="Corps : [[1d20+@{Corps}]]">CORPS</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_Esprit" type="number" /> <button name="" type="roll" value="Esprit : [[1d20+@{Esprit}]]">ESPRIT</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Perception" type="number" /> <button name="" type="roll" value="Perception : [[1d20+@{Perception}]]">PERCEPTION</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_R&eacute;action" type="number" /> <button name="" type="roll" value="R&eacute;action : [[1d20+@{R&eacute;action}]]">REACTION</button></td>
    </tr>
    </tbody>
    </table>

    <hr />

    <p>
        VITALITE <input name="attr_Vitalit&eacute;" type="number" />
        <input name="attr_Vitalit&eacute;Temporaire" type="number" />
        <input name="attr_Vitalit&eacute;_max" type="number" /><br />
        
        EPUISEMENT <input name="attr_Epuisement" type="number" />
        <input name="attr_EpuisementTemporaire" type="number" />
        <input name="attr_Epuisement_max" type="number" />
    </p>

    <hr />

    <h3>ARGENT</h3>

    <p>
        EV <input name="attr_EclatVegaline" type="number" />
        EP <input name="attr_EclatPlatine" type="number" />
        ED <input name="attr_EclatDiamant" type="number" /><br />
        
        EO <input name="attr_EclatOr" type="number" />
        EA <input name="attr_EclatArgent" type="number" />
        EC <input name="attr_EclatCuivre" type="number" />
    </p>

    <hr />

    <h3>INVENTAIRE</h3>

    <p>
        <label for="attr_inventaire"></label> <textarea id="attr_inv" cols="30" name="attr_Inventaire" rows="6"> </textarea>
    </p>

    <h3>NOTES</h3>

    <p>
        <label for="attr_notes"></label> <textarea id="attr_notes" cols="30" name="attr_notes" rows="6"> </textarea>
    </p>
</div>

Section 3

<div id="other_sheet">
    <p>
        Nom <input name="attr_character_name" type="text" /><br />
        
        Race <input name="attr_Race" type="text" />
        Niveau <input name="attr_Niveau" type="number" /><br />
        
        Taille <input name="attr_Taille" type="text" />
        Poids <input name="attr_Poids" type="text" />
    </p>

    <hr />

    <h3>CARACTERISTIQUES</h3>

    <table style="border-collapse: collapse; width: 100%;" border="1">
    <tbody>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Attaque" type="number" /> <button name="" type="roll" value="Attaque : [[1d20+@{Attaque}]]">ATTAQUE</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_D&eacute;fense" type="number" /> <button name="" type="roll" value="D&eacute;fense : [[1d20+@{D&eacute;fense}]]">DEFENSE</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Vie" type="number" /> <button name="" type="roll" value="Vie : [[1d20+@{Vie}]]">VIE</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_Arcane" type="number" /> <button name="" type="roll" value="Arcane : [[1d20+@{Arcane}]]">ARCANE</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Corps" type="number" /> <button name="" type="roll" value="Corps : [[1d20+@{Corps}]]">CORPS</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_Esprit" type="number" /> <button name="" type="roll" value="Esprit : [[1d20+@{Esprit}]]">ESPRIT</button></td>
    </tr>
    <tr>
    <td style="width: 50%;">&nbsp;<input name="attr_Perception" type="number" /> <button name="" type="roll" value="Perception : [[1d20+@{Perception}]]">PERCEPTION</button></td>
    <td style="width: 50%;">&nbsp;<input name="attr_R&eacute;action" type="number" /> <button name="" type="roll" value="R&eacute;action : [[1d20+@{R&eacute;action}]]">REACTION</button></td>
    </tr>
    </tbody>
    </table>

    <hr />

    <p>
        VITALITE <input name="attr_Vitalit&eacute;" type="number" />
        <input name="attr_Vitalit&eacute;Temporaire" type="number" />
        <input name="attr_Vitalit&eacute;_max" type="number" /><br />
        
        EPUISEMENT <input name="attr_Epuisement" type="number" />
        <input name="attr_EpuisementTemporaire" type="number" />
        <input name="attr_Epuisement_max" type="number" />
    </p>

    <hr />

    <h3>ARGENT</h3>

    <p>
        EV <input name="attr_EclatVegaline" type="number" />
        EP <input name="attr_EclatPlatine" type="number" />
        ED <input name="attr_EclatDiamant" type="number" /><br />
        
        EO <input name="attr_EclatOr" type="number" />
        EA <input name="attr_EclatArgent" type="number" />
        EC <input name="attr_EclatCuivre" type="number" />
    </p>

    <h3>CAPACITES</h3>

    <p>
        <label for="attr_capacite_others"></label> <textarea id="attr_capa_others" cols="30" name="attr_Capacite_others" rows="6"> </textarea>
    </p>

    <h3>INVENTAIRE</h3>

    <p>
        <label for="attr_inventaire"></label> <textarea id="attr_inv" cols="30" name="attr_Inventaire" rows="6"> </textarea>
    </p>
</div>

Merci beaucoup pour ceux qui auront la patience de me lire :)
Windows / Firefox 110.0

A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
26 févr. 2023 à 09:19

Bonjour

Le plus simple, tu places chacune des sections concernées dans une div

Et ensuite, tu suis la méthode que tu as trouvé pour cacher un élément en ciblant la DIV désirée.
0
Réponse 2 / 2
GemaKuroNekoChan Messages postés 2 Date d'inscription dimanche 26 février 2023 Statut Membre Dernière intervention 26 février 2023
26 févr. 2023 à 16:12

Merci pour la réponse

En effet cette solution fonctionne, mais arrivé sur roll20 ça ne les affiche pas, j'ai posté sur le forum du site

En tout cas pour ce qui est de ma question, c'est résolu et encore merci :)
0

Discussions similaires

suggestion d'amis: comment apparaitre?
earl_grey -
Bene -

7 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses
Facebook comment apparaître en suggestion ami
veli010 -
jackeB -

4 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses