Masquer/Afficher Div [Résolu]

Signaler
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
25 janvier 2017
-
Messages postés
6
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
12 mai 2012
-
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

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Mouarf, j'avais pas vu, j'ai laisser le onload sur le body et il faut le supprimer (sinon, error)

[o-_-o]
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
25 janvier 2017

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
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
25 janvier 2017

non, ça ne marche pas. Le bouton s'affichent bien, mais ils ne fonctionnent pas...
Messages postés
84
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
25 janvier 2017

Impecc ! J'ai aussi modifier i<3 en i<=3 (car cela n'affichait pas le dernier div).
Merci pour ton aide.

Dom
Messages postés
1
Date d'inscription
lundi 29 décembre 2008
Statut
Membre
Dernière intervention
2 novembre 2010

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 ?
Messages postés
1
Date d'inscription
jeudi 18 juin 2009
Statut
Membre
Dernière intervention
6 juin 2011

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.
Messages postés
6
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
12 mai 2012

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