18041 sujets

Questions générales et questions de débutants

Toggle : faire apparaître l'élément caché à l'ouverture

Bonjour à tous,

Totalement inculte et débutant (sauf les balises vraiment basiques de HTML, je vais vous demander votre indulgence avant tout...
J'essaie d'insérer un bouton pour cacher un paragraphe dans une page, avec ce script:

dans head :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>

et dans body :
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
<button>hide - show</button>
<p><img border="0" src="123-2369_IMG.JPG" width="559" height="522"></p>
<button>hide/show</button>

Comment faire pour que l'image n'apparaisse pas au chargement de la page, mais seulement si on clique le bouton ?
Merci beaucoup par avance. Smiley biggrin
Administrateur
Voici une piste : http://codepen.io/anon/pen/vNPwmw

Cela consiste simplement à ajouter le masquage de l'élément ciblé dès le chargement du document

$("p").hide();


Par contre au passage, quelques remarques

Il ne faut plus utiliser l'attribut border sur les <img>, qui est remplacé par CSS depuis une bonne quinzaine d'années Smiley cligne 

img {
  border:0;
}


Je ne comprends pas l'utilité des balises <script> qui écrivent des balises style. Autant les écrire directement dans le code source (par contre dans l'exemple elles ne servent à rien).

Il faut éviter autant que possible les appels à document.write
Modifié par dew (19 Nov 2015 - 21:28)
Bonsoir Dew,

Merci tout d'abord pour ta réponse aimable et rapide.

En effet, cette modification permet de masquer le § au chargement. J'ai trouvé aussi comment intégrer le second bouton dans la zone qui apparaît, ainsi on n'en voit qu'un en mode "masqué".

Merci pour la remarque concernant "border". Si mon code est obsolète c'est sans doute parce que j'utilise FrontPage (!), qui depuis plus de 10 ans, m'a toujours paru simple pour un débutant, et permet aussi de toucher au code si nécessaire.

Je ne comprends pas pour "script", si j'ôte ce terme cela ne fonctionne plus ..?
Merci encore, en tous cas.
Bonjour,
ziggy a écrit :
Je ne comprends pas pour "script", si j'ôte ce terme cela ne fonctionne plus ..?
Merci encore, en tous cas.

Ce que Dew essaie de t'expliquer, c'est que le code en question ajoute simplement des ligne de CSS. Autant donc mettre directement ces lignes dans le CSS (soit un fichier, ou au pire dans ton <head> dans une balise <style></style>)
Modifié par SolidSnake (20 Nov 2015 - 07:43)
AH, oui, je comprends. De fait, je n'ai pas de CSS, chaque page est "autonome"...je sais c'est préhistorique, mais comme expliqué je ne connais presque rien au sujet.
Merci SolidSnake.
Et une dernière question, si je voulais plusieurs zones "masquables", commandées une par une, chacune avec un bouton (ou plutôt deux : un bouton avant le § pour montrer, et un autre bouton en fin de § pour cacher), est-ce possible simplement ? Smiley rolleyes
Peut-on réutiliser plusieurs fois le même code, mais avec button1, button2...etc ?
Dew m'a pris de cours, mais oui, c'est possible facilement.
Pose déjà ton architecture HTML ici, et on pourra t'aider pour le JS.
Voici le code de la page (une page test pour le moment) :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>

<body>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
<button>Montrer</button>

<p><img img {
border:0;
} src="123-2369_IMG.JPG" width="559" height="522"></p>
<p><button>Masquer</button></p>

<p>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
<button>Montrer</button></p>

<p>
<img img {
border:0;
} src="IMG_5553.JPG"></p>

<p>
<button>Masquer</button></p>

</body>
</html>

A ce stade, seul le premier bouton apparaît au chargement ce qui est très bien.
Mais deux problèmes :
1 - le click sur ce premier bouton révèle non pas une mais les deux photos, or je voudrais que le premier bouton ne révèle que la première.
2 - une fois révélées les photos, le click sur n'importe quel bouton cache les deux images, or je voudrais que chaque bouton ferme uniquement le paragraphe immédiatement au-dessus.

Je n'ai pas réussi à comprendre comment y rémédier. Y a-t-il une solution simple ? Merci par avance.
Salut,

(...) c'est logique, tu demandes d'ouvrir <p>, il t'ouvre tous les <p>

Suggestion : attribuer une id à tes <p> (et tes boutons).

Quelque chose comme ça :


$("p_1").hide();
$("button_1").click(function(){
$("p_1").toggle();

$("p_2").hide();
$("button_2").click(function(){
$("p_2").toggle();




<p id="1"><img img {
border:0;
} src="123-2369_IMG.JPG" width="559" height="522"></p>
<button id="1">Masquer</button>

<p id="2"><img img {
border:0;
} src="123-2369_IMG.JPG" width="559" height="522"></p>
<button id="2">Masquer</button>

etc, etc...
Zed1 a écrit :
Suggestion : attribuer une id à tes &lt;p&gt; (et tes boutons).

Quelque chose comme ça :


$("p_1").hide();
$("button_1").click(function(){
$("p_1").toggle();

$("p_2").hide();
$("button_2").click(function(){
$("p_2").toggle();

Par contre, il ne vont pas bien fonctionner tes sélecteurs sans le dièse et les events non fermés Smiley cligne

Perso, j'ai une autre suggestion, utiliser les sélecteurs "Tree traversal" (je n'ose le traduire celui-là) pour avoir un truc un peu plus dynamique (et donc moins long).

En modifiant légèrement ton architecture, ça donne ÇA
Modifié par SolidSnake (20 Nov 2015 - 14:47)
Merci beaucoup, Zed1.
Je croyais avoir compris à peu près ça, mais le viewer de FrontPage me dit qu'un "}" est attendu à la ligne 19, caractère 1. Or la ligne 19, c'est : </head>

Je ne m'y retrouve pas avec la syntaxe des ) et }... Pourtant, dans l'éditeur de FP, le code couleur ne semble pas montrer d'erreur.

Voici le code à présent :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("p_1").hide();
$("button_1").click(function(){
$("p_1").toggle();
$("p_2").hide();
$("button_2").click(function(){
$("p_2").toggle();
});
});
</script>
</head>

<body>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
<button>Montrer</button>

<p id="1"><img img {
border:0;
} src="123-2369_IMG.JPG" width="559" height="522"></p>
<p><button id="1">Masquer</button></p>

<p>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
<button>Montrer</button>

<p id="2"><img img {
border:0;
}src="IMG_5553.JPG"></p>
<p>
<button id="2">Masquer</button></p>

</body>

Par avance, merci de ton aide.
SolidSnake, merci à toi aussi ; ta solution semble élégante et parfaite sur la démo du lien.
Mais problèmes, je n'utilise pas de CSS (j'imagine qu'on peut mettre le code dans <head> ?)... et je ne sais pas ou placer le code JS..dans <head>, entre les balises <script> et <script/> ?
ziggy a écrit :
Mais problèmes, je n'utilise pas de CSS (j'imagine qu'on peut mettre le code dans &lt;head&gt; ?)... et je ne sais pas ou placer le code JS..dans &lt;head&gt;, entre les balises &lt;script&gt; et &lt;script/&gt; ?

EDIT : Tu peux virer la ligne de CSS, ça fonctionne tout pareil, hein Smiley langue ...
Et si tu utilises du CSS (comme M. Jourdain sans le savoir) d'ailleurs j'ai vu que tu avais pris au pied de la lettre une phrase de Dew, mais ça ne fonctionne pas cette bête là :
<img img {
border:0;
}src="IMG_5553.JPG">

C'est à la rigueur :
<img style="border:0;" src="IMG_5553.JPG">


Mais de manière un peu plus élégante (et SI tu ne veux pas passer par des fichiers externes) :
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*TON CSS ICI*/
	</style>
</head>
<body>
	<!-- TON HTML ICI -->

	<script src="fichiers-javascript-externes.js"></script> <!-- Comme jQuery -->
	<script>
		// TON JAVASCRIPT ICI
	</script>
</body>
</html>

Modifié par SolidSnake (20 Nov 2015 - 15:01)
SI tu es en HTML 5 oui , <script> </script> suffit sinon c'est <script type="text/javascript"</script> et tu peux placé cette balise dans le head, dans le body, comme tu le souhaite. le mieux est de le mettre à la fin du body, pour être sur que ton HTML est bien chargé les éléments avant. cela vaut pour <style> ou <style type="text/css">
Merci à tous pour vos réponses ; j'avoue que je me gratte la tête pour m'y retrouver.

Je ne voudrais pas tout reprendre, mais seulement, sans trop raffiner, que mon code ci-dessus marche, donc j'ai compris je crois qu'il manque des # et des }, mais je ne sais pas ou les mettre...?

Gardez en tête s'il vous plaît que mon niveau de connaissance est juste le html très basique...Merci !

 <script>
var $j=jQuery.noConflict();
//1er bouton//
$j(document).ready(function(){
  $j("#montrer_1").click(function(){
    $j("p_10").show();
  });
});

$j(document).ready(function(){
  $j("#cacher_1").click(function(){
    $j("p_10").hide();
  });
});
//2ème bouton//
$j(document).ready(function(){
  $j("#montrer_2").click(function(){
    $j("p_12").show();
  });
});

$j(document).ready(function(){
  $j("#cacher_2").click(function(){
    $j("p_12").hide();
  });
});
</script>



<li>
       <button id="montrer_1">Ouvrir</button>
                 <p_10 style="display:none;">
	                   <h1>Toto à la plage</h1>
    	                           <button id="cacher_1">Fermer</button>
                 </p>
</li>

<li>
     <button id="montrer_2">Ouvrir</button>
          <p_12 style="display:none;">
                    <h1>Toto à la montagne</h1>
                            <button id="cacher_2">Fermer</button>
          </p>
</li>


C'est un peu "barbare" mais c'est juste pour que tu comprennes le principe.

A tout ce qui t'a été dit, j'ajouterais :
- Google n'aime pas les éléments cachés, les textes (cachés) seront mal référencés
- l'ouverture est très brutale. En full CSS (ou jquery), tu peux arriver à des résultats beaucoup plus sexy, tapes, par exemple : "show hide glissant" dans Goo.....
@plus
Merci Zed1, mais en utilisant le premier bloc de code dans head, et le second dans body, cela affiche tous les boutons et aucun ne fonctionne...

Mon code modifié avec votre aide (que je rappelle ci-dessous) fonctionne maintenant à peu près, à ceci près que les boutons ne sont pas à la ligne (ce que j'aimerais bien avoir pour les détacher du texte qui précède et qui suit) ; si je mets <br> ou <br />, ou des <p> et <p/>, cela ne fonctionne pas...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
$("button.affiche").click(function(){
$(this).hide()
.next('p').show()
});

$("button.masque").click(function(){
$(this).parent('p').hide()
.prev().show()
});
});</script>
</head>

<body>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
<button class="affiche">Montrer</button>
<p>
<img border="0" src="premiere_image.gif" width="150" height="192">
<button class="masque">Masquer</button>
</p>
<button class="affiche">Montrer</button>
<p>
<img border="0" src="deuxieme-image.gif" width="200" height="155">
<button class="masque">Masquer</button>
</p>
</body>
</html>
Sujet clos
Aller à