Afficher/Masquer plusieurs éléments en javascript

Fermé

tchounga04 - 29 oct. 2012 à 12:55
tchounga04 Messages postés 10 Date d'inscription lundi 29 octobre 2012 Statut Membre Dernière intervention 13 avril 2018 - 12 janv. 2013 à 10:55

Bonjour,

J'aimerai savoir comme faire avec plusieurs div sur la même page ?

Voilà mon blog d'essais :
http://sarah-ruiz-essais2.blogspot.fr/

Voilà le code javascript :

<script>
var hide = true;
function showcomment()
{

if (hide)
{
document.getElementById("zonecomment").style.display='block';
document.getElementById("suite1").innerHTML = '<b><u>reduire</u></b>';
hide = false;

}
else
{
document.getElementById("zonecomment").style.display='none';
document.getElementById("suite1").innerHTML = '<b><u>suite...</u></b>';

hide = true;

}
}
</script>

Et le code html :

<a name="comment"></a>
<a onclick="showcomment()" style="cursor:pointer">

<div id="suite1">
<b><u>suite...</u></b>
</div>
</a>

suivi de
<div id="zonecomment" style="display:none">
mon contenu qui peut s'afficher et se masquer
</div>

D'avance merci! !

A voir également:

Afficher/masquer div javascript onclick
Telecharger javascript - Télécharger - Langages
Masquer conversation whatsapp - Guide
Afficher appdata - Guide
Comment masquer les amis sur facebook - Guide
Afficher mot de passe wifi android - Guide

8 réponses

Réponse 1 / 8

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
29 oct. 2012 à 13:11

if faut faire une fonction avec des arguments

	function showcomment(id,idText) {
	
		var o = getElementById(id);
		var t = getElementById(idText);
		o.style.display =(o.offsetHeight > 0)? 'none' : 'block';
		t.innerHTML =(o.offsetHeight > 0)? '<b><u>suite...</u></b>' : '<b><u>reduire</u></b>';
	}

onclick="showcomment('zonecomment1','suite1');"
onclick="showcomment('zonecomment2','suite2');"
onclick="showcomment('zonecomment3','suite3');"

Réponse 2 / 8

tchounga04
29 oct. 2012 à 13:51

Merci pour votre réponse.
Mais pouvez-vous me dire où je dois placer ces codes ?
Je suis désolée je suis pas trop câlée sur le sujet.
Merci

Réponse 3 / 8

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
29 oct. 2012 à 14:41

comment avant...

je ne comprend pas la question

Réponse 4 / 8

Blunderer Messages postés 273 Date d'inscription mardi 17 juillet 2012 Statut Membre Dernière intervention 6 décembre 2012 83
29 oct. 2012 à 16:32

Code html :

<div>
<a onclick="showcomment()" style="cursor:pointer;display:block;text-decoration:underline;font-weight:bold;" id="suite1">suite...</a>
</div>

<div id="zonecomment" style="display:none;">
mon contenu qui peut s'afficher et se masquer
</div>

Code javascript :

<script>
var hide = true;
function showcomment()
{

if (hide)
{
document.getElementById("zonecomment").style.display='block';
document.getElementById("suite1").innerHTML = 'reduire';
hide = false;

}
else
{
document.getElementById("zonecomment").style.display='none';
document.getElementById("suite1").innerHTML = 'suite...';

hide = true;

}
}
</script>

Chez moi ca marche ;)

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

Posez votre question

Réponse 5 / 8

tchounga04
29 oct. 2012 à 19:15

Je suis désolée mais je n'y arrive pas.

Peut être que je m'y prends mal.
Voilà comment je procède :

Je mets le code javascript juste avant la balise </head>, dans le code html de mon blog
et
Je mets le code html dans le corps de mon message..

Réponse 6 / 8

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
29 oct. 2012 à 19:52

ce code ne permet pas de l'appliqué a plusieurs éléments vu que les ids sont fixé dans la fonction

il faut que tu prennes la fonction que je t'ai donnée (sans variable volante) et que tu mettes un id différent sur chaque élément que tu veux modifier

la fonction doit se trouver dans <script type="text/javascript"></script> dans la balise head

ensuite tu met onclick="showcomment('id de l'élément a déplier ou replier',' id de l'élément ou le texte se modifie');" dans la balise qui doit réagir au click de la souris

par exemple <div onclick="showcomment('zonecomment1','suite1')">Cliquer ici</div>

il est possible de le faire sans avoir à mettre d'id sur chaque élément mais pour ça il faut connaitre la structure de la page

Réponse 7 / 8

tchounga04
29 oct. 2012 à 20:45

Merci Atropa pour votre aide, mais je crois que je suis vraiment nulle ! =/

Alors, j'ai tout supprimé et j'ai simplement mis la fonction que vous m'aviez donné, comme ceci dans la balise head de mon blog :

<script type="text/javascript">
function showcomment(id,idText) {

var o = getElementById(id);
var t = getElementById(idText);
o.style.display =(o.offsetHeight > 0)? 'none' : 'block';
t.innerHTML =(o.offsetHeight > 0)? '<b><u>suite...</u></b>' : '<b><u>reduire</u></b>';
}
</script>

Mais je ne vois pas où je dois mettre
<div onclick="showcomment('zonecomment1','suite1')">Cliquer ici</div>

Dans la balise head de mon blog, ou dans le corps du message ? Ou dans les deux ?

Merci, et désolée je suis un peu lourdotte là !

Réponse 8 / 8

tchounga04 Messages postés 10 Date d'inscription lundi 29 octobre 2012 Statut Membre Dernière intervention 13 avril 2018
12 janv. 2013 à 10:55

C'est bon j'ai trouvé =D.

Ici pour 3 éléments :

1. Coller le code ci-dessous, juste avant la balise </head> :

<script>
var hide = true;
function showcomment()
{

if (hide)
{
document.getElementById("zonecomment").style.display='block';
document.getElementById("suite1").innerHTML = '<b><u>Masquer</u></b>';
hide = false;

}
else
{
document.getElementById("zonecomment").style.display='none';
document.getElementById("suite1").innerHTML = '<b><u>Afficher la suite...</u></b>';

hide = true;

}
}

function showcomment2()
{

if (hide)
{
document.getElementById("zonecomment2").style.display='block';
document.getElementById("suite2").innerHTML = '<b><u>Masquer</u></b>';
hide = false;

}
else
{
document.getElementById("zonecomment2").style.display='none';
document.getElementById("suite2").innerHTML = '<b><u>Afficher la suite...</u></b>';

hide = true;

}
}

function showcomment3()
{

if (hide)
{
document.getElementById("zonecomment3").style.display='block';
document.getElementById("suite3").innerHTML = '<b><u>Masquer</u></b>';
hide = false;

}
else
{
document.getElementById("zonecomment3").style.display='none';
document.getElementById("suite3").innerHTML = '<b><u>Afficher la suite...</u></b>';

hide = true;

}
}
</script>

2. Code html :

- Elément 1 :

Texte visible à l'arrivée sur la page
<a name="comment"></a><a onclick="showcomment()" style="cursor:pointer"><div id="suite1"><b><u>Afficher la suite...</u></b></div>
</a>
<div id="zonecomment" style="display:none">
Texte qui peut s'afficher et se masquer
</div>

- Elément 2

Texte visible à l'arrivée sur la page
<a name="comment"></a><a onclick="showcomment2()" style="cursor:pointer"><div id="suite2"><b><u>Afficher la suite...</u></b></div>
</a>
<div id="zonecomment2" style="display:none">
Texte qui peut s'afficher et se masquer
</div>

- Elément 3
Texte visible à l'arrivée sur la page
<a name="comment"></a><a onclick="showcomment3()" style="cursor:pointer"><div id="suite3"><b><u>Afficher la suite...</u></b></div>
</a>
<div id="zonecomment3" style="display:none">
Texte qui peut s'afficher et se masquer
</div>

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code pour cacher le numero orange cameroun