Code pour texte en accordéon ??

Résolu/Fermé
sevkaa Messages postés 18 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 18 décembre 2008 - 21 mars 2008 à 14:43
 unknown - 3 mars 2012 à 18:00
Bonjour,

Je vous met l'adresse de ma page pour vous donner une idée.
http://www.vivano.net/html/bassin_greybox.html

Ce que je voudrais faire :
> j'aimerai que le texte des paragraphes "bassin japonais" et "bassin chinois" soient masqués
et qu'ils apparaissent seulement lorsqu'on clique sur le titre.
Et qu'ils disparaissent quand on reclique dessus.

exemples :

http://www.stickmanlabs.com/accordion/

http://www.715grafik.com/

mais dans ces exemples il faut a priori créer des blocs de fond, ce dont je n'ai pas besoin.
Est-il possible de faire agir ce script seulement sur du texte?

De plus j'aimerai savoir si le fait d'avoir mis un script greybox peut poser des problèmes d'incompatibilité
(oui j'y connais pas grand chose en code!)


Merci pour vos éclairages
A voir également:

9 réponses

Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
21 mars 2008 à 15:21
Tel qu'est ton code actuellement, tu ne peux pas. Il faut que ton titre et ton paragraphe aient des balises distinctes. Je te conseille d'utiliser la forme suivante (sémantiquement, c'est même mieux) :
<h3>titre du paragraphe</h3>
<p>contenu du paragraphe</p>


Ca donnerait quelque chose comme ça :
<script type="text/javascript">
	<!--
		function afficherPara(para)
		{
			if(document.getElementById(para).style.display == 'none')
				document.getElementById(para).style.display = 'block';
			else
				document.getElementById(para).style.display = 'none';
		}
	-->
</script>

<h3 id="titre1" onclick="afficherPara('paragraphe1');">Bassin japonais</h3>
<p id="paragraphe1">
	Le bassin est une des composantes de l’art du jardin japonais. Les  fondements de cet art proviennent essentiellement du culte Shinto, la plus ancienne religion du Japon, un mode de vie à part  entière, qui repose sur de vastes concepts d'<strong>harmonies entre l'homme et la  nature</strong>.<br/>
	Trois éléments principaux cohabitent dans le jardin sous différentes  formes pour exprimer le <em>fuzei</em>, émotion poétique du paysage évoqué : le  végétal, le minéral et l'eau. <span class="Style7">L'eau</span>, de nature Yin, qu'elle soit sous forme de  cascades, de ruisseau ou d'étang, tient une place prépondérante dans le  jardin japonais, métaphore de son paysage. L'archipel du Japon est un pays  balayé par la mousson au Sud et soumis à de fortes chutes de neige au Nord.<br/>
</p>
3
merci enax pour ton code!
Je cherchais une solution et j'ai trouvé ce post, du coup j'ai récupéré ton code juste comme tu viens de le poster et ça fonctionne. Seul petit problème, quand la page charge, le paragraphe s'affiche. Ce dont j'aurais besoin c'est lorsque la page charge le paragraphe ne s'affiche pas; et lorsque l'on clique il s'affiche. Ensuite ton script fonctionne d'après ce que j'ai compris en boucle.
J'ai pas de connaissances et j'ai étudié ton script pour essayer de le modifier, mais il doit me manquer quelques bases pour y arriver. pourrais-tu me donner le tuyau ?

Merci d'avance !
0
sevkaa Messages postés 18 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 18 décembre 2008
21 mars 2008 à 15:35
OK

<h3>titre du paragraphe</h3>
<p>contenu du paragraphe</p>

c'est du css, n'est-il pas ? (j'avais prévenu que j'étais une bille en code ;)

Ma première question est :
à quel endroit faut-il que je spécifie
<h3>titre du paragraphe</h3>
<p>contenu du paragraphe</p>
???

Dans <head>? dans un fichier css à part? dans mon frigo ?
0
sevkaa Messages postés 18 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 18 décembre 2008
21 mars 2008 à 15:46
Non mais en fait je suis blonde,

fallait juste mettre le code comme ça direct et... ça marche!!

Merci beaucoup

Je vais fignoler les ptites retouches
0
sevkaa Messages postés 18 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 18 décembre 2008
21 mars 2008 à 16:11
Je reviens à la charge

donc le code fonctionne impec' : http://www.vivano.net/html/test_accordeon.html
par contre j'aimerai que lorsqu'on arrive sur la page les paragraphes "bassins japonais" et "bassins chinois" soient masqués
et qu'ils n'apparaissent que lorsqu'on clique dessus.
De plus j'aimerai aussi qu'il y ai une sorte d'indice qui montre que le curseur passe sur une zone interactive (genre main ou autre chose qui inciterait les gens à cliquer pour faire apparaitre le texte)

* pas sure d'avoir été très claire*
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
21 mars 2008 à 16:15
Ca c'est juste du CSS. Dans ta feuille de style, tu mets display: none; pour les paragraphes et cursor: pointer; pour les titres.
0
sevkaa Messages postés 18 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 18 décembre 2008
21 mars 2008 à 16:17
Euh comment dire???... Je n'ai pas utilisé de CSS

Oui je sais c'est mal
0
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
21 mars 2008 à 16:22
Feuille de style, header ou balise. C'est toi qui vois. Lis la partie "Où mettre du CSS ?" de cette page : https://openclassrooms.com/fr/courses#ss_part_1
0
sevkaa Messages postés 18 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 18 décembre 2008
21 mars 2008 à 16:28
Merci...

Promis, ma prochaine résolution c'est de me mettre au CSS. :)
0
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
21 mars 2008 à 16:32
Pour faire un site mieux vaut connaître, en effet. :p
0