18008 sujets

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

Ouvrir et fermer un petit texte

Bonjour,

Je veux qu'un petit texte s'ouvre en cliquant sur un titre ou une icone, du genre ouvrir, fermer.

J'utilise ce code :
<body>
<div id="replie" style="display: none;"><span
 onclick="document.getElementById('deplie').style.display = 'block';
document.getElementById('replie').style.display = 'none';">
Ouvrir
</span></div>
<div id="deplie" style="display: block;">
<span
 onclick="document.getElementById('replie').style.display = 'block';document.getElementById('deplie').style.display = 'none';">Fermer
</span>
<br>
Votre texte</div>
</body>


Ca se passe bien, mais quand je veux le dupliquer pour en avoir plusieurs les uns sous les autres, le second n'est pas actif.
Vous pouvez voir ce que je souhaite faire sur ce site : http://www.salondumanuscrit.fr/
Il faut cliquer sur voir le résumé / maquer le résumé.

Merci d'avance
Cordialement
Gilles
Modifié par 6l20 (01 Sep 2014 - 11:52)
Modérateur
Bonjour,

Je vois que pour cela tu utlise du JavaScript.

Malheureusement je connais que trop peu ce langage mais il existe une alternative exclusivement en HTML + CSS.

L'astuce consiste à utiliser l'élément :TARGET dans ton code CSS.

Pour ça je connais un tutoriel où tout ceci te sera expliqué de manière détaillée et en français qui plus est.

Si ça t'intéresse, je te suggère de te rendre sur mon site (adresse en bas de ce message) ; dans la rubrique Liens, tu y verras parler d'un "hollandais".
Sur le site du fameux "hollandais" je t'invite à te rendre dans la rubrique Tutoriels suivi du tutoriel "Effets en CSS".
Le passage qui te concerne est le point numéro 10 "un spoiler pur css".

Bon webdev !


NB: mon hébergeur est actuellement down rendant mon site temporairement inaccessible. Ils ont pour habitude de solutionner très vite ce genre de problème donc si mon site affiche page blanche, tenter un instant plus tard.
Vous allez me dire "définir instant plus tard". Qui vivra verra, n'est-ce pas ? Smiley smile
Modifié par Greg_Lumiere (27 Aug 2014 - 10:43)
Bonjour et bienvenue sur Alsa Smiley cligne

Pour répondre totalement à la question, le problème vient ici du fait que plusieurs éléments d'une page ne peuvent pas disposer du même identifiant. Un identifiant (valeur de l'attribut "id") doit être unique dans la page.

Tu dois donc utiliser un classe, qui permet d'avoir plusieurs éléments qui portent la même valeur.

Je t'ai fait un exemple un peu plus propre, en séparant HTML, CSS et javascript, comme il est recommandé de toujours procéder, pour plein de raison Smiley smile

> http://jsfiddle.net/audrasjb/4vmuymo6/1
ou
> http://jsfiddle.net/audrasjb/4vmuymo6/2

Attention, l'exemple ci dessus utilise la bibliothèque jQuery, que tu dois donc implémenter dans ta page.
Modifié par audrasjb (27 Aug 2014 - 12:08)
Bonjour,

Merci pour vos réponses.
J'aime beaucoup le texte qui s'ouvre sur fond rouge. Par contre je ne sais pas ce que je dois faire des 3 scripts.
Quant à "implémenter jquery" je reste coi

Bref, en l'état et malgré de nombreux essais, je suis démuni Smiley decu

Si vous aviez un script, un seul à reproduire, ma vie serait plus simple Smiley cligne
Hé oui, mais ici, l'idée, c'est surtout d'apprendre à apprendre et de s'entraider entre nous, pas de tout livrer tout cuit (8ème commandement ^^) Smiley smile

Dans le jsFiddle mis en lien dans mon premier message, tu as un premier "cadre" à gauche qui contient le code HTML. Ça c'est ton contenu.

Dans le second cadre à droite, tu as les styles CSS que j'applique à chaque élément. Dans le code que tu fournissais, cela était directement intégré dans ton balisage HTML, ce qui est mal Smiley langue
Je l'ai donc séparé. De ton côté, soit tu te débrouille pour le réintégrer dans ton balisage au moyen des attributs "style" que tu utilisais jusqu'à présent (pas bien), soit tu l'intégrer dans un fichier .css externe que tu relie à ta page HTML, soit tu mets le tout dans une balise <style>…</style> dans la partie <head> de ton fichier HTML.

Dans le troisième cadre à gauche, tu as le code Javascript nécessaire pour faire ce que tu souhaite. Ça, tu dois l'intégrer à l'intérieur d'une balise <script>…</script> au sein de ton fichier HTML (de préférence en fin de fichier, juste avant la fermeture de </body>).

Quand je parlais d'implémenter la bibliothèque jQuery, il suffit simplement de placer la ligne de code suivante, juste avant la balise <script>…</script> dont je parlais juste ci-dessus. La ligne de code en question contient un appel à une librairie Javascript fort utile, elle est à reprendre telle quelle :
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>


Voilà voilà Smiley smile
Modifié par audrasjb (27 Aug 2014 - 16:03)
Bonjour,

Merci. je reviens sur le sujet très vite, là je suis un peu débordé par le travail.

A+
Gilles
J'ai quand même fait cet essai. Dans mon éditeur html j'obtiens qq chose qui ne se réplique pas dans la page de mon site. Je plaide pour un problème de balises (?)
Nota : pour le moment je harde le css en haut de page, je l'externaliserai plus tard.

Voici le code développé : 
<html>
<head>
  <title></title>
  <style>
.replie { margin: 10px;
}
.bouton-deplier {
text-decoration: none;
color: #fff;
background: #000;
padding: 5px 10px;
cursor: pointer;
}
.deplie {
margin: 10px;
background: red;
color: #fff;
}
.bouton-replier {
margin: 10px;
display: inline-block;
text-decoration: none;
color: #fff;
background: #000;
padding: 5px 10px;
cursor: pointer;
}
.montexte {
padding: 10px 10px 20px 10px;
}
  </style>
</head>
<body>
<!-------------- premier livre ------------->
<div class="replie"><a class="bouton-deplier">Ouvrir</a>
</div>
<div class="deplie">
<span class="bouton-replier">Fermer</span>
<div class="montexte">Le Lorem Ipsum est simplement du
faux texte employ&eacute; dans la composition et la mise en page
avant impression.</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('.deplie').hide(); // on masque tout $('.bouton-deplier').click(function(event){
event.preventDefault(); // on ne suit pas le lien
$(this).parent().next().slideToggle();
});
$('.bouton-replier').click(function(event){
event.preventDefault(); // on ne suit pas le lien
$(this).parent().slideToggle();
});
});
</script><br>
<!-------------- second livre ------------->
<div class="replie"><a class="bouton-deplier">Ouvrir</a>
</div>
<div class="deplie">
<span class="bouton-replier">Fermer</span>
<div class="montexte">Le Lorem Ipsum est simplement du
faux texte employ&eacute; dans la composition et la mise en page
avant impression.</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('.deplie').hide(); // on masque tout $('.bouton-deplier').click(function(event){
event.preventDefault(); // on ne suit pas le lien
$(this).parent().next().slideToggle();
});
$('.bouton-replier').click(function(event){
event.preventDefault(); // on ne suit pas le lien
$(this).parent().slideToggle();
});
});
</script><br>
</body>
</html>

Modifié par 6l20 (01 Sep 2014 - 12:01)
A force de faire des copiés collés de codes sources j'obtiens qq chose qui fonctionne Smiley murf

Sauf que le code CSS n'est pas chez moi et des liens qui ont l'air de renvoyer vers fiddle.

<html>
<head>
  <title></title>
</head>
<body>
<div class="handler handler_horizontal"></div>
<div id="result" class="window bottom">
<iframe name="result"
 src="http://fiddle.jshell.net/audrasjb/4vmuymo6/1/show/"
 frameborder="0"></iframe></div>
<div class="shim"></div>
<script>
TogetherJSConfig_enableAnalytics = true;
TogetherJSConfig_cloneClicks = "#run, .toggler";
TogetherJSConfig_toolName = "Collaboration"
</script>
<script src="https://togetherjs.com/togetherjs.js"></script>
</body>
</html>


Help, encore et toujours
Merci, je ne m'en sors pas.
Modifié par 6l20 (01 Sep 2014 - 11:52)
Non, là tu as intégré l'iframe de mon exemple sur JsFiddle, c'est pas bon.

Dans ton premier essai, c'est presque OK.
Corrections à faire :

– utiliser un doctype dans toutes les pages web que tu construit. Exemple :
<!doctype html>

Ceci se met en ligne 1 de ton fichier HTML et est toujours obligatoire.

– ne pas dupliquer le script JS et l'intégration de jQuery pour chaque panneau. Tu ne dois implémenter ces lignes qu'une seule fois pour toute et en fin de document HTML, juste avant la fermeture de l'élément body.
Autre chose : merci d'utiliser les boutons de coloration syntaxique du forum pour mettre en forme le code que tu poste pour améliorer sa lisibilité. Tes lecteurs te remercieront Smiley smile
audrasjb a écrit :
Autre chose : merci d'utiliser les boutons de coloration syntaxique du forum pour mettre en forme le code que tu poste pour améliorer sa lisibilité. Tes lecteurs te remercieront Smiley smile


Je le note pour l'avenir. Désolé.
audrasjb a écrit :
Non, là tu as intégré l'iframe de mon exemple sur JsFiddle, c'est pas bon.

Dans ton premier essai, c'est presque OK.
Corrections à faire :

– utiliser un doctype dans toutes les pages web que tu construit. Exemple :
&lt;!doctype html&gt;

Ceci se met en ligne 1 de ton fichier HTML et est toujours obligatoire.

– ne pas dupliquer le script JS et l'intégration de jQuery pour chaque panneau. Tu ne dois implémenter ces lignes qu'une seule fois pour toute et en fin de document HTML, juste avant la fermeture de l'élément body.


L'ajour d'un doctype ne change rien. J'ai fini par trouver une solution, beaucoup moins élégante que la tienne, mais je ne peux pas passer plus de temps là-dessus.
voir sur: www.chumeditions.com

Merci pour tout
Esaqui a écrit :
Je le note pour l'avenir. Désolé.

Tu peux le faire en éditant tes messages (ce que je viens de faire) Smiley cligne
Sujet clos
Aller à