Résolu Besoin d'un code pouvant cacher une div dans une autre

[big hot dogzz boi]

Bonjour,

Je vous explique mon soucis.

J'ai une première DIV, coloré en bleu, en forme de rectangle.
Cette DIV doit contenir deux catégories cliquable.
"Produits" et "Catalogue".
Lorsque qu'on clique sur produit, j'aimerais que dans la DIV bleu, des images s'affichent.
Et lorsque qu'on clique sur catégories, les images de produit s'enlèvent pour laisser place au catalogue, dans la même DIV bleu toujours.

J'aimerais aussi que cette DIV bleu soit activable quand on clique sur une image, et donc désactivable aussi.

Merci bisous

 

[deleted577633]

Bonjour,

Je vous explique mon soucis.

J'ai une première DIV, coloré en bleu, en forme de rectangle.
Cette DIV doit contenir deux catégories cliquable.
"Produits" et "Catalogue".
Lorsque qu'on clique sur produit, j'aimerais que dans la DIV bleu, des images s'affichent.
Et lorsque qu'on clique sur catégories, les images de produit s'enlèvent pour laisser place au catalogue, dans la même DIV bleu toujours.

J'aimerais aussi que cette DIV bleu soit activable quand on clique sur une image, et donc désactivable aussi.

Merci bisous

Salut,

Je n'ai pas trop compris ce que tu veux ?

 

[big hot dogzz boi]

Salut,

Je n'ai pas trop compris ce que tu veux ?

Puis-je te parler par Discord ?

 

[deleted577633]

Puis-je te parler par Discord ?

Oui créer un serveur et donne le lien

 

[Paul GTP]

Ta demande est-elle résolue ?

Si oui, je t'invite à cliquer sur Cette réponse a répondu à ma question sur le message qui t'a aidé pour rajouter le préfixe résolu à la discussion.

Sinon, essaie quelque chose comme ça (je l'ai codé vite fait je l'ai pas testé, si ça marche pas je regarderai ça ^^):

HTML:

<div style="color: blue; width: 500px; height: 200px;">
    <button onclick="produits()">Produits</button> <button onclick="catalogue()">Ctalogue</button>
 
    <div id="produits" style="display: none;">
        <img src="img/1.jpg" alt="Image 1" />
        <img src="img/2.jpg" alt="Image 2" />
        <img src="img/3.jpg" alt="Image 3" />
    </div>

    <div id="catalogue" style="display: none;">
        <img src="img/4.jpg" alt="Image 4" />
        <img src="img/5.jpg" alt="Image 5" />
        <img src="img/6.jpg" alt="Image 6" />
    </div>
</div>

JS:

var produits = document.getElementById('produits');
var catalogue = document.getElementById('catalogue');
function cacher(id) {
    var div = document.getElementById(id);
    div.style.display = "none";
}

function montrer(id) {
    var div = document.getElementById(id);
    div.style.display = "block";
}

function produits() {
    montrer('produits');
    cacher('catalogue');
}

function catalogue() {
    montrer('catalogue');
    cacher('produits');
}

Bon après-midi,
Paul GTP

 

[big hot dogzz boi]

Ta demande est-elle résolue ?

Si oui, je t'invite à cliquer sur Cette réponse a répondu à ma question sur le message qui t'a aidé pour rajouter le préfixe résolu à la discussion.

Sinon, essaie quelque chose comme ça (je l'ai codé vite fait je l'ai pas testé, si ça marche pas je regarderai ça ^^):

HTML:

<div style="color: blue; width: 500px; height: 200px;">
    <button onclick="produits()">Produits</button> <button onclick="catalogue()">Ctalogue</button>
 
    <div id="produits" style="display: none;">
        <img src="img/1.jpg" alt="Image 1" />
        <img src="img/2.jpg" alt="Image 2" />
        <img src="img/3.jpg" alt="Image 3" />
    </div>

    <div id="catalogue" style="display: none;">
        <img src="img/4.jpg" alt="Image 4" />
        <img src="img/5.jpg" alt="Image 5" />
        <img src="img/6.jpg" alt="Image 6" />
    </div>
</div>

JS:

var produits = document.getElementById('produits');
var catalogue = document.getElementById('catalogue');
function cacher(id) {
    var div = document.getElementById(id);
    div.style.display = "none";
}

function montrer(id) {
    var div = document.getElementById(id);
    div.style.display = "block";
}

function produits() {
    montrer('produits');
    cacher('catalogue');
}

function catalogue() {
    montrer('catalogue');
    cacher('produits');
}

Bon après-midi,
Paul GTP

cimer polo

 

[Paul GTP]

J'ai déplacé ta discussion en section Résolu .

Bonne fin d'après-midi,
Paul GTP