Display:none & Display:block

Version imprimable

10/01/2013, 18h37
RicardoBxl

1 pièce(s) jointe(s)

Display:none & Display:block

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,
10/01/2013, 18h44
NoSmoking

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.

+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:

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>

Solution à mon problème via Javascript

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:

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>

Citation:

Envoyé par RicardoBxl

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

Un bouton qui ressemble furieusement à un INPUT non valide :roll:

Voici une meilleure version, il me semble :

Code:

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>

11/01/2013, 21h19
RicardoBxl

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 :P

Merci de ta participation en tout cas.

Ricardo