Code pour texte en accordéon ?? [Résolu/Fermé]

Signaler
Messages postés
18
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
18 décembre 2008
-
 unknown -
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

9 réponses

Messages postés
203
Date d'inscription
lundi 11 février 2008
Statut
Membre
Dernière intervention
16 mars 2010
145
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

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 87571 internautes nous ont dit merci ce mois-ci

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 !
Messages postés
18
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
18 décembre 2008

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 ?
Messages postés
18
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
18 décembre 2008

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
Messages postés
18
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
18 décembre 2008

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*
Messages postés
203
Date d'inscription
lundi 11 février 2008
Statut
Membre
Dernière intervention
16 mars 2010
145
Ca c'est juste du CSS. Dans ta feuille de style, tu mets display: none; pour les paragraphes et cursor: pointer; pour les titres.
Messages postés
18
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
18 décembre 2008

Euh comment dire???... Je n'ai pas utilisé de CSS

Oui je sais c'est mal
Messages postés
203
Date d'inscription
lundi 11 février 2008
Statut
Membre
Dernière intervention
16 mars 2010
145
Feuille de style, header ou balise. C'est toi qui vois. Lis la partie "Où mettre du CSS ?" de cette page : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html#ss_part_1
Messages postés
18
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
18 décembre 2008

Merci...

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