Masquer/Afficher Div

Résolu
dommm063 Messages postés 84 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 25 janvier 2017 - 4 avril 2008 à 10:04
cs_allamah Messages postés 6 Date d'inscription vendredi 19 mai 2006 Statut Membre Dernière intervention 12 mai 2012 - 12 mai 2012 à 12:41
Bonjour,

J'aimerais créer une page où le conetenu n'est pas affiché au chargement, et où il faut cliquer sur les titres pour dérouler le contenu.
J'ai déjà ça :



<html>
<head>
<script>
function visibilite(thingId)
{
 var i;
 var targetElement;
 for(i=1; i<=3;i++){
  targetElement = document.getElementById("divid" + i) ;
  targetElement.style.display = "none" ;
 }
 targetElement = document.getElementById("divid" + thingId) ;
 targetElement.style.display = "" ;
}
</script>





<script>
function cacher()
 var i;
 var targetElement;
 for(i=1; i<=3;i++){
  targetElement = document.getElementById("divid" + i) ;
  targetElement.style.display = "none" ;
 }





</script>
</head>






lien1


**** CONTENU LIEN1 *****

lien2


**** CONTENU LIEN2 *****


lien3


**** CONTENU LIEN3 *****











</html>






Mais il y a qq problèmes :
- au chargement, les 3 div sont affichées, alors que je voudrais qu'elles soient masquées.
- à chaque clic sur un tritre, la div précedement ouverte se ferme. j'aimerai qu'elle reste ouverte, et qu'elle se ferme si on reclic dessus le titre.

Quelqu'un a un début de solution ?

A+
Dom

10 réponses

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
4 avril 2008 à 10:45
Bien le bonjour pour que les div ne soient pas visible, un peut de style et le tour est joué ;o)
pour ce qui est d'ouvrir ferrmer, voilà comment faut faire:
 <html>
<head>
<script>
function visibilite(thingId)
{
 var i;
 var targetElement;
 targetElement = document.getElementById("divid" + thingId) ;
 if ( targetElement.style.display == "none")
     targetElement.style.display = "" ;
 else
     targetElement.style.display = "none" ;
}
</script>
</head>

lien1

**** CONTENU LIEN1 *****

lien2

**** CONTENU LIEN2 *****

lien3

**** CONTENU LIEN3 *****

</html>

[o-_-o]
3
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
4 avril 2008 à 11:01
Bah tu peux faire une métohde, assez simple :
function show(_show){
    var disp = (_show)? "" : "none";
    for ( var i=0; i<3; i++){
       document.getElementById("divid" + i).style.display = disp;
    }
}

non tester !

[o-_-o]
3
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
4 avril 2008 à 11:25
Probable,
function show(_show){
    var disp = (_show)? "" : "none";
    for ( var i= 1 ; i<3; i++){
       document.getElementById("divid" + i).style.display = disp;
    }
}
y a pas de div 0

[o-_-o]
3
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
4 avril 2008 à 10:47
Mouarf, j'avais pas vu, j'ai laisser le onload sur le body et il faut le supprimer (sinon, error)

[o-_-o]
0

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

Posez votre question
dommm063 Messages postés 84 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 25 janvier 2017
4 avril 2008 à 10:58
Super ! Merci pour la réponse, ça marche nickel !

Est-ce qu'il y aurait la possibilité de rajouter un bouton (ou un texte) qui permettent de développer tous les titres ou au contraire, de tout réduire ? Est-ce qu'il faut une autre fonction ?

Dom
0
dommm063 Messages postés 84 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 25 janvier 2017
4 avril 2008 à 11:18
non, ça ne marche pas. Le bouton s'affichent bien, mais ils ne fonctionnent pas...
0
dommm063 Messages postés 84 Date d'inscription mercredi 8 août 2007 Statut Membre Dernière intervention 25 janvier 2017
4 avril 2008 à 11:29
Impecc ! J'ai aussi modifier i<3 en i<=3 (car cela n'affichait pas le dernier div).
Merci pour ton aide.

Dom
0
zenka14 Messages postés 1 Date d'inscription lundi 29 décembre 2008 Statut Membre Dernière intervention 2 novembre 2010
2 nov. 2010 à 12:18
Bonjour,

J'ai besoin du même code à la différence que mes liens sont générés dynamiquement via un CMS.. du coup je peux pas utiliser à mettre sur le lien
a onClick="javascript:visibilite('1');" target="_blank">lien1


Il me faut un script qui fasse l'action suivant quand je clic sur un div class="indiceN" ça affiche le div class="listingN" qui correspond.

Vous avez une solution ?
0
dosuchouga Messages postés 1 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 6 juin 2011
6 juin 2011 à 14:48
salut,
Je crois que j'ai aussi un petit problème dans la même optique, j'utilise javascript pour masquer/afficher les contenus de ma liste mais je voulais ajouter le + et - genre en cliquant sur le - pour afficher et le + pour masquer comme dans le notepad. pour l'instant j'ai reussi à créer un bouton qui masque/affiche en cliquant sur ce bouton. voici mon code javascript combiné à xslt:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<html>

script type="text/javascript">
function ShowHide(elem) {
if(document.getElementById(elem).style.display == "none"){

document.getElementById(elem).style.display = '';
}
else{
document.getElementById(elem).style.display = "none"; }
}

</script>

[javascript:ShowHide('$sub_all_mod_index'); Folder-Unfolder]


<!-- ma liste-->



</html>
</xsl:stylesheet>
du coup l'idée est lorsqu'il y a affichage le bouton apparait "-" et en recliquant pour masquer le bouton ça devient "+".
Merci pour votre aide.
0
cs_allamah Messages postés 6 Date d'inscription vendredi 19 mai 2006 Statut Membre Dernière intervention 12 mai 2012
12 mai 2012 à 12:41
Bonjour,
Tout d'abord merci et grand merci pour ce bout de code qui ma fois m'a sauver la mise.
Mais il se pose un souci: Le formulaire qui se trouve ainsi caché ou affiché n'envoi pas les infos comme il se devrait.
J'ai un code qui récupère ces infos pour les traiter, mais il ne reçoit rien.
Pourriez-vous m'aide?
Merci.
Allamah
0
Rejoignez-nous