Faire apparaître une div au clic

22 mars 2020 à 18:09:28

Bonjour à tous,

Je viens vers vous pour un petit coup de main car j’essaye de faire quelque chose et je n’y arrive pas.

J’ai peu de connaissance dans le domaine, généralement je glane des infos à droite à gauche sur internet, j’essaye, je bidouille jusqu’à temps que ça marche, il est donc possible que vous voyiez des horreurs (ma copine en est devenue aveugle une fois).

Je cherche à coder mon profil de joueur sur un site, et j’ai une idée très précise de ce que j’aimerai faire. Le site en question ne prend en charge que le HTML et le CSS et on ne peut pas mettre de <style> au début du code, il faut chaque style dans chaque balise.

Voici le lien de ce que j’ai déjà fait : https://www.w3schools.com/code/tryit.asp?filename=GD485DQPX8Y0

Ce que je voudrais, c’est faire « disparaître » les différentes boites sur le coté droit pour qu'on ne voit que la première. Et qu’en cliquant sur les différentes étoiles à gauche, la bonne boite prenne la place de la première. En gros, on verrait ça :

Et si on clique sur la deuxième étoile, la boite « blabla 2 » apparaît à la place de la 1. Si on clique sur la troisième étoile, la boite « blabla 3 » apparaît à la place de la 1…. Etc sur autant de boite que voulu. J'ai déjà rendu les étoiles cliquables (si j'ai pas fait d'âneries).

J’ai bien trouvé quelque chose pour faire « disparaître » les boites avec display:none mais ça règle pas du tout mon problème.

Je vous remercie de m'avoir lue, j'espère avoir de vos nouvelles.

Bonne journée à vous tous,

Artemis.

MiNiMan.8.6

22 mars 2020 à 18:21:50

bonjour,

Si je comprends bien, tu souhaites ne faire apparaître qu'une seule boîte à la fois, sans passer par autre chose que du HTML / JS

Le soucis est que tu vas devoir passer par des "événements". et je pense que tu devrais passer par du Javascript, avec des événements "Click" pour ton cas . ( je peux me tromper )

si tu souhaites en apprendre plus à ce sujet :
- https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript/1918968-les-evenements

Cordialement

AbcAbc6

23 mars 2020 à 1:16:46

Bonsoir, Pour le code que tu donnes en lien il est plein d'erreur. Passe le au validateur pour voir et corriger tes erreurs => https://validator.w3.org/

La balise <img> ne sort jamais sans sont attribut alt obligatoire.

L'attribut name est pour les éléments de formulaire.

Un lien vide est inaccessible .

Seul la balise <li> est enfant direct de <ul> ou <ol> donc pas de <i> ou <br> la ou tu l'écris.

Ce que tu cherche à faire ce rapproche d'un menu à onglet, pour ce faire tu auras besoin de la pseudo class :target.

exemple :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Pseudo class :target</title>
        <style>
            section {
                position: relative;
            }
            .box {
                display: none;
                width: 300px;
                min-height: 200px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
            .visible {
                display: block;
            }
            #un {
                background: lawngreen;
            }
            #deux {
                background: yellowgreen;
            }
            #trois {
                background: tomato;
            }
            #un:target, #deux:target, #trois:target {
                display: block;
            }
        </style>
    </head>
    <body>
        <section>
            <a href="#un">Boite 1</a>
            <a href="#deux">Boite 2</a>
            <a href="#trois">Boite 3</a>
            <div id="un" class="box visible ">
                <h1>boite1</h1>
            </div>
            <div id="deux" class="box ">
                <h1>boite2</h1>
            </div>
            <div id="trois" class="box ">
                <h1>boite3</h1>
            </div>
        </section>
    </body>
</html>

Je te laisse adapté le code à ton projet.

AlainPré

23 mars 2020 à 10:18:38

Quand tu dis "Le site en question ne prend en charge que le HTML et le CSS"

C'est déjà mal barré car je ne vois pas trop comment faire ça sans Javascript.

Mais si tu peux utiliser du Javascript c'est très facile.

Je te propose de faire le test suivant :

 <img src="...etoile.png" alt="" xxx="alert('ok')" />

En remplaçant xxx par onclick.
Si un message s'affiche au clic sur l'image, je te donnerai un exemple de code JS pour afficher/masquer les boîtes.

-
Edité par AlainPré 23 mars 2020 à 10:20:11

Alain - Linkedin

AbcAbc6

23 mars 2020 à 10:29:32

AlainPré a écrit:

Quand tu dis "Le site en question ne prend en charge que le HTML et le CSS"

C'est déjà mal barré car je ne vois pas trop comment faire ça sans Javascript.

Bonjour, et l'exemple que je donne?? Pourquoi ne peut il convenir? Full HTML/CSS

Baiawai

23 mars 2020 à 13:00:08

https://codepen.io/electriclaurieland/pen/pEYgYx

Aide toi le ciel t'aidera.

Lartak

24 mars 2020 à 7:24:28

Bonjour.

@Baiawai: Tu devrais quand même lire ce qui est dit dans le sujet avant d'intervenir en donnant juste un lien qui pour l'instant ne peut actuellement pas convenir à l'auteur du sujet.

-
Edité par Lartak 24 mars 2020 à 7:24:41

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

gcyrillus

24 mars 2020 à 16:57:30

Bonjour,

Quelle est ton hébergement pour avoir autant de limitations ?

Tu dis que tu ne peut pas mettre de <style> en début de code, mais est ce parce que tu n'as pas accès à la portion <head> de ton document ou parce que tu ne peut vraiment pas ajouter de balise style dans <body> comme ceci (style entre deux boites) https://www.w3schools.com/code/tryit.asp?filename=GD6GGURY5LAO ?

Bon confinement

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

AlainPré

29 mars 2020 à 11:24:55

AbcAbc6 a écrit:

Bonjour, et l'exemple que je donne?? Pourquoi ne peut il convenir? Full HTML/CSS

Si ça marche : très bonne idée. je n'y avais pas pensé... et lu trop vite ton post. J'ai cru que c'était juste une correction des erreurs du code initial.

-
Edité par AlainPré 29 mars 2020 à 11:41:33

Alain - Linkedin