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