Masquer/Afficher Div [Résolu]

Messages postés
84
Date d'inscription
mercredi 8 août 2007
Dernière intervention
25 janvier 2017
- 4 avril 2008 à 10:04 - Dernière réponse :
Messages postés
6
Date d'inscription
vendredi 19 mai 2006
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
Afficher la suite 

Votre réponse

10 réponses

Meilleure réponse
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 4 avril 2008 à 10:45
3
Merci
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]

Merci Zobibol 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 87 internautes ce mois-ci

Commenter la réponse de Zobibol
Meilleure réponse
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 4 avril 2008 à 11:01
3
Merci
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]

Merci Zobibol 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 87 internautes ce mois-ci

Commenter la réponse de Zobibol
Meilleure réponse
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 4 avril 2008 à 11:25
3
Merci
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]

Merci Zobibol 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 87 internautes ce mois-ci

Commenter la réponse de Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 4 avril 2008 à 10:47
0
Merci
Mouarf, j'avais pas vu, j'ai laisser le onload sur le body et il faut le supprimer (sinon, error)

[o-_-o]
Commenter la réponse de Zobibol
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Dernière intervention
25 janvier 2017
- 4 avril 2008 à 10:58
0
Merci
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
Commenter la réponse de dommm063
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Dernière intervention
25 janvier 2017
- 4 avril 2008 à 11:18
0
Merci
non, ça ne marche pas. Le bouton s'affichent bien, mais ils ne fonctionnent pas...
Commenter la réponse de dommm063
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Dernière intervention
25 janvier 2017
- 4 avril 2008 à 11:29
0
Merci
Impecc ! J'ai aussi modifier i<3 en i<=3 (car cela n'affichait pas le dernier div).
Merci pour ton aide.

Dom
Commenter la réponse de dommm063
Messages postés
1
Date d'inscription
lundi 29 décembre 2008
Dernière intervention
2 novembre 2010
- 2 nov. 2010 à 12:18
0
Merci
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 ?
Commenter la réponse de zenka14
Messages postés
1
Date d'inscription
jeudi 18 juin 2009
Dernière intervention
6 juin 2011
- 6 juin 2011 à 14:48
0
Merci
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.
Commenter la réponse de dosuchouga
Messages postés
6
Date d'inscription
vendredi 19 mai 2006
Dernière intervention
12 mai 2012
- 12 mai 2012 à 12:41
0
Merci
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
Commenter la réponse de cs_allamah

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.