begin process at 2012 02 09 19:59:17
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Masquer/Afficher Div

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Masquer/Afficher Div

vendredi 4 avril 2008 à 10:04:13 | Masquer/Afficher Div

dommm063

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>
<body window.onload = cacher;>

<a onClick="javascript:visibilite('1');" target="_blank">lien1<br>
<div id="divid1" ><table border=1><tr><td bgcolor=#FFFFFF width=200 height=200>**** CONTENU LIEN1 *****</td></tr></table></div>
<a onClick="javascript:visibilite('2');" target="_blank">lien2<br>
<div id="divid2" ><table border=1><tr><td bgcolor=#FF0000 width=200 height=200>**** CONTENU LIEN2 *****</td></tr></table></div>
<a onClick="javascript:visibilite('3');" target="_blank">lien3<br>
<div id="divid3" ><table border=1><tr><td bgcolor=#00FF00 width=200 height=200>**** CONTENU LIEN3 *****</td></tr></table></div>

</body>
</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

vendredi 4 avril 2008 à 10:45:32 | Re : Masquer/Afficher Div

Zobibol
Réponse acceptée !
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>
<body window.onload = cacher;>

<a onClick="javascript:visibilite('1');" target="_blank">lien1<br>
<div id="divid1" style="display:none;" ><table border=1><tr><td bgcolor=#FFFFFF width=200 height=200>**** CONTENU LIEN1 *****</td></tr></table></div>
<a onClick="javascript:visibilite('2');" target="_blank">lien2<br>
<div id="divid2" style="display:none;"><table border=1><tr><td bgcolor=#FF0000 width=200 height=200>**** CONTENU LIEN2 *****</td></tr></table></div>
<a onClick="javascript:visibilite('3');" target="_blank">lien3<br>
<div id="divid3" style="display:none;"><table border=1><tr><td bgcolor=#00FF00 width=200 height=200>**** CONTENU LIEN3 *****</td></tr></table></div>

</body>
</html>



[o-_-o]
vendredi 4 avril 2008 à 10:47:07 | Re : Masquer/Afficher Div

Zobibol
Mouarf, j'avais pas vu, j'ai laisser le onload sur le body et il faut le supprimer (sinon, error)

[o-_-o]
vendredi 4 avril 2008 à 10:58:37 | Re : Masquer/Afficher Div

dommm063
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
vendredi 4 avril 2008 à 11:01:44 | Re : Masquer/Afficher Div

Zobibol
Réponse acceptée !
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;
    }
}


<input type="button" value="montrer tous" onclick="show(true)"; />
<input type="button" value="cacher tous" onclick="show(false)"; />

non tester !


[o-_-o]
vendredi 4 avril 2008 à 11:18:42 | Re : Masquer/Afficher Div

dommm063
non, ça ne marche pas. Le bouton s'affichent bien, mais ils ne fonctionnent pas...
vendredi 4 avril 2008 à 11:25:23 | Re : Masquer/Afficher Div

Zobibol
Réponse acceptée !
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]
vendredi 4 avril 2008 à 11:29:41 | Re : Masquer/Afficher Div

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

Dom
mardi 2 novembre 2010 à 12:18:49 | Re : Masquer/Afficher Div

zenka14
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<br>

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 ?
lundi 6 juin 2011 à 14:48:44 | Re : Masquer/Afficher Div

dosuchouga


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>
<body>
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>
<button type="button">
<a href="javascript:ShowHide('$sub_all_mod_index');">Folder-Unfolder</a></button>
<div style="display:" id="$sub_all_mod_index">
<!-- ma liste-->
</div>
</body>
</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.


Cette discussion est classée dans : var, contenu, document, div, targetelement

Répondre à ce message

Sujets en rapport avec ce message

Methode "document.getElementById" // Probleme de modification de plusieurs DIV [ par Gunsnake ] Bonjour, Voici mon problème. J'aimerais, au moyen d'un bouton actionné, modifier plusieurs DIV de ma page web. Tout ceci dans le but d'éviter les fra Probleme sur document.createElement().id [ par reunionnais974 ] Bonjour j'ai un souci en affectant id ou des evenements de souris.je charge un fichier xml je traite les données ce qui va créer ma page HTMLsauf que utilisation tool man drag [ par calitom ] Bonjour,J'utilise la fonction de drag de tool man.J'ai plusieurs div draggables.Voici comment je leur affecte la possibilitée d'être draggé dans une z Modification contenu DIV par Menu [ par jpdollo ] Bonjour :Sur ma home j'ai un DIV dont le contenu est modifié par un menuActuellement à l'ouverture de la page le contenu du DIV est blancJe voudrais q div value [ par bossou ] bonjour à tous. je voudrais vous remercier tout un chacun pour les réponses pertinentes que vous apportez sur ce site. j'ai un autre problème dans le Ajout de champs dans un formulaire [ par neolitec ] Bonjour,J'ai cherché des moyens pour ajouter des champs dans mon formulaire, sans avoir recours à un rechargement de la page.J'avais écrit une fonctio Alternance entre divs [ par Trashful ] Bonjour à tous, J'ai un petit problème et j'espère que votre communauté sera en mesure de corriger mes petites erreurs. N'étant pas un professionnel Réinitialiser le contenu dynamique d'une div cachée [ par istella ] Bonjour, J'ai un niveau débutant en Javascript et php, je dois réaliser une page qui contient des données provenant d'une base de données. Au survol d Supprime toujours la dernière ligne du tableau ? [ par alaska749 ] Bonsoir, J'ai ré-adapté un code trouvé afin qu'il m'initialise et me crée à chaque appel de la fonction, un tableau dynamique en fonction d'une chain


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,919 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)