Display:none & Display:block

**RicardoBxl** · 10/01/2013, 18h37

Bonjour,

Sur la copie d'écran jointe vous verrez que dans ma section droite ainsi que dans celle du centre j'ai mis des boutons (flèches) via la balise <input>.

Au stade où j'en suis de mon apprentissage est-ce que je suis logique et programme correctement en voulant associer l'événement onclick à ces boutons ?

Le but étant que lors du click de la souris la suite du texte apparaisse. L'idée est d'écrire en javascript un script disant en gros au click tu mets le div à display:block. Sachant que par défaut je les mettrais à display:none.

Merci de me dire si ma façon de voir est bonne.

PS J'ai vu sur de nombreux sites que l'on début un chapitre mais que pour lire la suite on doit cliquer sur un bouton. C'est ce que je désire proposer.

Bien à vous,

**NoSmoking** · 10/01/2013, 18h44

Bonjour,
le code HTML aurait été plus judicieux pour t'en dire plus.

La balise button a été inventée pour ce genre d'occasion.

**Muchos** · 11/01/2013, 01h22

+1 pour utiliser un BUTTON et non un INPUT.
Néanmoins, je pense que vous pouvez faire aussi vos boîtes déroulantes en css, avec la pseudo-classe TARGET :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Boite déroulante</title>
	<style type="text/css">
section {
        position: relative; /* Pour placer le menu */
        width: 50%;
}
#text {
        height: 3em; /* hauteur de la boîte si fermée */
        margin: 0;
        padding: 1ex;
        border: 2px solid #333;
        text-align: justify;
        overflow: hidden; /* Masque le débordement */
}
#text:target { height: auto; } /* hauteur de la boîte si ouverte */
menu {
        position: absolute;
        right: 0;
}
menu li { display: inline; }
menu a {
        display: inline-block;
        padding: 0.5ex;
        border: thin solid #222;
        color: #222;
        background: #DDD;
}
        </style>
</head>
<body>
<section>
	<p id="text">
J'ai vu sur de nombreux sites que l'on début un chapitre mais que pour lire la suite on doit cliquer sur un bouton. C'est ce que je désire proposer. J'ai vu sur de nombreux sites que l'on début un chapitre mais que pour lire la suite on doit cliquer sur un bouton. C'est ce que je désire proposer. J'ai vu sur de nombreux sites que l'on début un chapitre mais que pour lire la suite on doit cliquer sur un bouton. C'est ce que je désire proposer.
	</p>
	<menu><!-- Pas encore reconnu :( -->
		<li><a href="#text">Dérouler</a></li>
		<li><a href="#">Fermer</a></li>
	</menu>
</section>
</body>
</html>

**RicardoBxl** · 11/01/2013, 12h31

Bonjour et merci à vous deux pour vos réponses.

Je prends note de la tienne Muchos et la testerai sous peu.

Toutefois je suis parvenu à faire ce que je voulais via Javascript.

Au click sur mon bouton mon div Afficher apparaît. Si j'appuie à nouveau sur le bouton le div Afficher disparaît.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<p>Bienvenue sur mon site. Avant toutes choses sachez que celui-ci n'est pas encore 
		terminé. <input type="image" name="fleche" id="fleche" src="Images/icon_fleche.png" onclick="AfficherBloc()"/></input>
		</p>
 
		<div id="Afficher">
		En effet j'ai entrepris sa création depuis le mois de novembre 2012. Et entre l'apprentissage
		des différents langages tels Html5, CSS et Javascript ainsi...
		</div>
 
		<script>
                
                function AfficherBloc(){
                
                var BlocTexte = document.getElementById("Afficher");
                 
                var Etat = BlocTexte.style;
                 
                if (Etat.display=="" || Etat.display=="none")
                {
                    Etat.display = "block";
                }
                else
                {
                    Etat.display = "none";
                }
                
                }
                
                </script>

**Muchos** · 11/01/2013, 18h59

Envoyé par RicardoBxl

Au click sur mon bouton mon div Afficher apparaît.

Un bouton qui ressemble furieusement à un INPUT non valide

Voici une meilleure version, il me semble :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Bouton déroulement</title>
	<style type="text/css">
button {border: none; background: none;}
        </style>
</head>
<body>
 
	<p>Bienvenue sur mon site. Avant toutes choses sachez que celui-ci n'est pas encore terminé.
	<button onclick="AfficherBloc()"><img alt="Afficher" src="http://www.developpez.net/forums/images/profil-etendu.gif" /></button>
	<!-- <input type="image" name="fleche" id="fleche" src="Images/icon_fleche.png" onclick="AfficherBloc()"/></input> -->
	</p>
 
	<div id="Afficher">
	En effet j'ai entrepris sa création depuis le mois de novembre 2012. Et entre l'apprentissage des différents langages tels Html5, CSS et Javascript ainsi...
	</div>
 
	<script>
        function AfficherBloc(){
        var BlocTexte = document.getElementById("Afficher");
        var Etat = BlocTexte.style;
        if (Etat.display=="" || Etat.display=="none")
                {
                Etat.display = "block";
                }
        else
                {
                Etat.display = "none";
                }
        } 
        </script>
 
</body>
</html>

**RicardoBxl** · 11/01/2013, 21h19

Coucou Muchos,

Ce que tu dis m'interpelles car j'ai vu sur différents sites cette manière de faire. J'entends par là l'utilisation de la balise <input> pour servir de bouton. La preuve en est que mes flèche apparaissent bien et qu'au clic l'évènement se produit.

Maintenant je prends note de ton code et je reconnais que cela fonctionne très bien.

Bon je vais étudier plus en profondeur l'aspect boutons

Merci de ta participation en tout cas.

Ricardo

Display:none & Display:block

HTML

Discussions similaires

Partager

Partager