Div fermée qui s'ouvre quand on clic

Sujet résolu

20 janvier 2020 à 15:44:56

Bonjour à tous,

Je m'y connait pas du tout en Javascript ...

Ce que j'aimerais faire c'est exactement pareil que sur le site de cours Openclassroom.com

Exemple sur cette page : https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/4237646-decouvrez-le-fonctionnement-dun-site-ecrit-en-php

J'aimerai crée une div qui s'ouvre et se réduit au clic.

J'ai trouvé un code HTML et un code JAVASCRIPT dans un de vos forum, il fonctionne très bien.

J'aimerai que lorsqu'on arrive sur le site, la DIV soit fermé. Actuellement ce n'est pas le cas, quand j'arrive sur le site la DIV est déjà ouverte.

<!DOCTYPE html>
<html>

<head>

<script src="script.js"></script>

</head>

<body>

<!--====== SOLUTION 1 ======--> 

<h2 onclick="cache('solution1')">1ère solution : ....</h2>
<div id="solution1">  
<p>Texte et image de la solution 1</p>
</div>

</body>

</html>

// script.js

var bool=true;
function cache(id){
    if(bool==true){
        document.getElementById(id).style.display='none';
        bool=false;
    }else{
        document.getElementById(id).style.display='block';
        bool=true;
    }
}

Est ce que je peux modifier quelques chose sur le javascript ou sur le code HTML ?

Merci d'avance

Cordialement

H'mida

kulturman

20 janvier 2020 à 16:57:58

Salut. A ta question je comprends que tu n'as pas compris le code, tu devrais revoir le cours plus tard.

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    <body>    
        <h2 onclick="cache('solution1')">1ère solution : ....</h2>
        <div id="solution1"> 
            <p>Texte et image de la solution 1</p>
        </div>
        <script src="script.js"></script>
    </body>
</html>

var bool=true;
function cache(id){
    if(bool==true){
        document.getElementById(id).style.display='none';
        bool=false;
    }else{
        document.getElementById(id).style.display='block';
        bool=true;
    }
}
cache('solution1');

-
Edité par kulturman 20 janvier 2020 à 18:29:14

h'midaHameir

20 janvier 2020 à 18:15:04

Bonsoir,

Merci pour ta réponse, je compte regarder le cours Javascript très prochainement.

- J'ai pris ton bout de code javascript, je l'ai enregistrer dans "script-test.js"

- Dans ma page HTML j'ai appelé le fichier "script-test.js" et j'ai mis le code HTML que tu m'a donné mais quand je met ton code HTML rien n'apparait, la div n'apparait pas

<div id="solution1" style="display:none">
<p>Texte et image de la solution 1</p>
</div>

Merci d'avance

kulturman

20 janvier 2020 à 18:30:24

J'ai édité mon précédent message, j'ai ramené la balise script à la fin (ça a son importance) et j'avais oublié de passer l'ID à la fonction cache. Bonne suite

h'midaHameir

20 janvier 2020 à 20:32:48

Merci beaucoup sa fonctionne ! (Je ne comprend rien au code mais ça fonctionne...)

J'ai un peu bataillé au début car je mettais le code

<script src="script.js"></script>

n'importe ou dans ma page HTML et du coup ça fonctionnait pas.

Mais quand je fais comme toi et que je le met juste après la div concernée sa fonctionne.

(..Je pensais qu'on pouvais mettre n'importe ou ce genre de code qui appel un fichier Javascript externe)

Merci

Bonne soirée

kulturman

20 janvier 2020 à 22:23:29

Pas de quoi. Bonne suite pour le cours