Afficher/Masquer plusieurs éléments en javascript
tchounga04
-
tchounga04 Messages postés 12 Statut Membre -
tchounga04 Messages postés 12 Statut Membre -
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! !
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
- Afficher appdata - Guide
- Comment masquer les amis sur facebook - Guide
- Masquer conversation whatsapp - Guide
- Comment appeler en masquer - Guide
- Afficher taille dossier windows - Guide
8 réponses
if faut faire une fonction avec des arguments
onclick="showcomment('zonecomment1','suite1');"
onclick="showcomment('zonecomment2','suite2');"
onclick="showcomment('zonecomment3','suite3');"
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');"
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
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
Code html :
Code javascript :
Chez moi ca marche ;)
<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
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..
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..
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
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
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à !
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à !
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>
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>