Charger le contenu de div en appuyant sur une texte [Résolu/Fermé]

Signaler
Messages postés
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
-
 Naj -
Bonjour,

Sur une page en PHP, j'ai deux phrase et deux div, le problème c'est que j'aimerais bien faire en cliquant sur une texte le div associe à elle s'affiche.

JE ME DEMANDE SI VOUS POUVEZ M'AIDER, MERCI A L'AVANCE

CORDIALEMENT

2 réponses

Messages postés
51
Date d'inscription
mardi 29 octobre 2013
Statut
Membre
Dernière intervention
18 février 2014
1
Pour ton problème il suffit d'écrire une fonction javascript qui va permettre l'affichage de ton div en utilisation la méthode "onclick".
Lorsqu'on clique sur le texte on affiche le div avec son contenu.
Voici un exemple de code que tu pourra adapter.

<script type="text/javascript">
function afficher_cacher(id)
{
if(document.getElementById(id).style.visibility=="hidden")
{
document.getElementById(id).style.visibility="visible";
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
}
else
{
document.getElementById(id).style.visibility="hidden";
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
}
return true;
}
</script>
<body>
<span id="bouton_texte" onclick="afficher_cacher('texte');">Afficher le texte</span>
<div id="texte">
texte a afficher
</div>
</body>
Excellente journée
Messages postés
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
10
Merci beaucoup, c'est ce que je cherche, je vais l'adapter à mon projet
Messages postés
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
10
Salam,

J'ai trouvé une autre solution : on 2 image, quand on clique sur une image le div associe s'affiche, voici le code.

<script type="text/javascript">
function afficher_div(image)
{
switch(image){
case 'image1':
document.getElementById("page1").style.display="block";
document.getElementById("page2").style.display="none";
break;
case 'image2':
document.getElementById("page2").style.display="block";
document.getElementById("page1").style.display="none";
break;
}
}

</script>


<html>
<head>
<body>

<a href="javascript:afficher_div('image1');"><img src="image1.png"></a>
<a href="javascript:afficher_div('image2');"><img src="image2.png"></a>


<div id="page1" style="display:none;" >
<iframe src="1.jpg" width="800" height="600" align="middle"></iframe>
</div>
<div id="page2" style="display:none;" >
<iframe src="2.jpg" width="800" height="600" align="middle"></iframe>
</div>
</body>
</head>
</html>
Messages postés
51
Date d'inscription
mardi 29 octobre 2013
Statut
Membre
Dernière intervention
18 février 2014
1
ok.
c'est bien.
A+