Afficher / Cacher du texte

hercule29 Messages postés 2 Date d'inscription mardi 22 mai 2007 Statut Membre Dernière intervention 29 novembre 2011 - 28 nov. 2011 à 10:26
hercule29 Messages postés 2 Date d'inscription mardi 22 mai 2007 Statut Membre Dernière intervention 29 novembre 2011 - 29 nov. 2011 à 15:16
Bonjour,

Je suis à la recherche d'un script javascript (ou autre) pour afficher / cacher du texte en cliquant sur un bouton ou lien? Il y en a plein mais ce que je recherche diffère un peu :
à l'intérieur d'une boucle, il faudrait que je puisse afficher ceci :
+developper texte
-- blabla
+developper blabla
---blabla2
+developper blabla2
et ainsi de suite

pour résumer a chaque développement de lien je puisse développer à nouveau, mais pas avoir x lien pour développer 1 champ masqué comme je le vois sur la plupart des scripts
C'est faisable facilement ?

4 réponses

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
28 nov. 2011 à 16:08
Il existe plusieurs solutions pour développer/supprimer du texte :
1ère solution :
<html>
<head>
<script type="text/javascript">
function displaytext(idbt,iddiv)
{
if (idbt=="idbt1")
{
document.getElementById("iddiv1").innerHTML="-- blabla";
document.getElementById("idbt1").innerHTML="masquer le texte";
document.getElementById("idbt1").setAttribute("onclick","removetext(this,'iddiv1')");
}
else if(idbt=="idbt2")
{
document.getElementById("iddiv2").innerHTML="---blabla2";
document.getElementById("idbt2").innerHTML="masquer le texte";
document.getElementById("idbt2").setAttribute("onclick","removetext(this,'iddiv2')");
}
else if(idbt=="idbt3")
{
même traitement pour le troisième cas....
}
}

function removetext(idbt,iddiv)
{
if (idbt=="idbt1")
{
document.getElementById("iddiv1").innerHTML="";
document.getElementById("idbt1").innerHTML="afficher le texte";
document.getElementById("idbt1").setAttribute("onclick","displaytext(this,'iddiv1')");
}
else if(idbt=="idbt2")
{
document.getElementById("iddiv2").innerHTML="";
document.getElementById("idbt2").innerHTML="afficher le texte";
document.getElementById("idbt2").setAttribute("onclick","displaytext(this,'iddiv2')");
}
else if(idbt=="idbt3")
{
même traitement pour le troisième cas....
}
}
</script>
</head>

afficher le texte


afficher le texte


afficher le texte



Voici la première solution, vous pouvez aussi utiliser la propriété CSS display (et non pas visible/hidden qui ne libère pas l'espace à l'écran).
Bon courage!...
</html>
0
cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
28 nov. 2011 à 17:19
Je corrige une erreur de ma part dans le message précédent :
il y a : ...
il faut : ...
idem pour toutes les autres occurences du mot clé this (sinon cela ne fonctionnera pas).
On peut aussi écrire :...

De plus l'instruction conditionnelle :
if (idbt=="idbt1")
{
...
}
else if(idbt=="idbt2")
{
...
}
else if(idbt=="idbt3")
{
...
}

Peut aussi être remplacée par l'instruction conditionnelle :
swich (idbt)
{
case "idbt1":
...
break;
case "idbt2":
...
break;
case "idbt3":
...
break;
}

Voilà, j'ai corrigé mon erreur.
Bon courage!...
0
camillagaiaschicherie Messages postés 58 Date d'inscription vendredi 23 mai 2008 Statut Membre Dernière intervention 28 février 2012
28 nov. 2011 à 22:20
bonjour,
en gros c est un treeview que tu recherches

<html>
<head>
<style type="text/css">
ul li ul {
    display:none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('ul li').click(function(){
        $(this).find('ul').css('display',($(this).find('ul').css('display') == 'none') ? 'block' : 'none');
    });
});
</script>
</head>


    <li>+developper texte 
        
            <li>balbla</li>
            <li>balbla</li>
        
    </li>
    <li>+developper texte 
        
            <li>balbla</li>
            <li>balbla</li>
        
    </li>
    <li>+developper texte 
        
            <li>balbla</li>
            <li>balbla</li>
        
    </li>


</html>
0
hercule29 Messages postés 2 Date d'inscription mardi 22 mai 2007 Statut Membre Dernière intervention 29 novembre 2011
29 nov. 2011 à 15:16
Merci a vous, j'ai pu adapter un treeview (je ne connaissais pas le terme) pour le faire correspondre a ce que je voulais
0
Rejoignez-nous