Posez votre question Signaler

Cacher une partie d'une page Web [Résolu]

Messages postés
8
Date d'inscription
samedi 24 janvier 2004
Dernière intervention
11 mars 2006
 - - Dernière réponse : JacquesDW
Messages postés
4
Date d'inscription
samedi 19 février 2005
Dernière intervention
10 août 2005
 - 10 août 2005 à 17:35
Javascript / DHTML Posez votre question Signaler
Bonjour,

j'ai un formulaire affichant diverse infos mais je souhaiterai en
cacher une partie afin de n'afficher que les infos essentielles.



merci.
Afficher la suite 

Votre réponse

Répondre au sujet

8 réponses

Meilleure réponse
Signaler Commenter la réponse de la_pin
Messages postés
277
Date d'inscription
mercredi 11 août 2004
Dernière intervention
15 décembre 2005
3
Merci
Dans le HEAD



<style type="text/css" media="all">

/* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */

.cachediv {

visibility: hidden;

overflow: hidden;

height: 1px;

margin-top: -1px;

position: absolute;

}

</style>

<script type="text/javascript">

/*

* Montre / Cache un div

*/

function DivStatus( nom, numero )

{

var divID = nom + numero;

if (
document.getElementById && document.getElementById( divID ) )
// Pour les navigateurs récents

{


Pdiv = document.getElementById(
divID );

PcH = true;

}

else if (
document.all && document.all[ divID ] ) // Pour les veilles
versions

{

Pdiv = document.all[ divID ];

PcH = true;

}

else if (
document.layers && document.layers[ divID ] ) // Pour les très
veilles versions

{

Pdiv = document.layers[ divID ];

PcH = true;

}

else

{



PcH = false;

}

if ( PcH )

{


Pdiv.className ( Pdiv.className
'cachediv' ) ? '' : 'cachediv';

}

}



/*

* Cache tous les divs ayant le même préfixe

*/

function CacheTout( nom )

{

var NumDiv = 1;

if ( document.getElementById ) // Pour les navigateurs récents

{


while ( document.getElementById(
nom + NumDiv) )

{



SetDiv = document.getElementById( nom + NumDiv );



if ( SetDiv && SetDiv.className !=
'cachediv' )



{



DivStatus(
nom, NumDiv );



}



NumDiv++;

}

}

else if ( document.all ) // Pour les veilles versions

{


while ( document.all[ nom +
NumDiv ] )

{



SetDiv = document.all[ nom + NumDiv ];



if ( SetDiv && SetDiv.className !=
'cachediv' )



{



DivStatus(
nom, NumDiv );



}



NumDiv++;

}

}

else if ( document.layers ) // Pour les très veilles versions

{


while ( document.layers[ nom +
NumDiv ] )

{



SetDiv = document.layers[ nom + NumDiv ];



if ( SetDiv && SetDiv.className !=
'cachediv' )



{



DivStatus(
nom, NumDiv );



}



NumDiv++;

}

}

}



/*

* Montre tous les divs ayant le même préfixe

*/

function MontreTout( nom )

{

var NumDiv = 1;

if ( document.getElementById ) // Pour les navigateurs récents

{


while ( document.getElementById(
nom + NumDiv) )

{



SetDiv = document.getElementById( nom + NumDiv );



if ( SetDiv && SetDiv.className != '' )



{



DivStatus(
nom, NumDiv );



}



NumDiv++;

}

}

else if ( document.all ) // Pour les veilles versions

{


while ( document.all[ nom +
NumDiv ] )

{



SetDiv = document.all[ nom + NumDiv ];



if ( SetDiv && SetDiv.className != '' )



{



DivStatus(
nom, NumDiv );



}



NumDiv++;

}

}

else if ( document.layers ) // Pour les très veilles versions

{


while ( document.layers[ nom +
NumDiv ] )

{



SetDiv = document.layers[ nom + NumDiv ];



if ( SetDiv && SetDiv.className != '' )



{



DivStatus(
nom, NumDiv );



}



NumDiv++;

}

}

}



/*

* Inverse les divs: Cache les divs visible et montre le divs cachés :)

*/

function InverseTout( nom )

{

var NumDiv = 1;

if ( document.getElementById ) // Pour les navigateurs récents

{


while ( document.getElementById(
nom + NumDiv ) )

{



SetDiv = document.getElementById( nom + NumDiv );



DivStatus( nom, NumDiv );



NumDiv++;

}

}

else if ( document.all ) // Pour les veilles versions

{


while ( document.all[ nom +
NumDiv ] )

{



SetDiv = document.all[ nom + NumDiv ];



DivStatus( nom, NumDiv );



NumDiv++;

}

}

else if ( document.layers ) // Pour les très veilles versions

{


while ( document.layers[ nom +
NumDiv ] )

{



SetDiv = document.layers[ nom + NumDiv ];



DivStatus( nom, NumDiv );



NumDiv++;

}

}

}

</script>



Dans le BODY



- [javascript:DivStatus( 'mondiv', '1' ) Ouvrir/Fermer le Bloc 1]


- [javascript:DivStatus( 'mondiv', '2' ) Ouvrir/Fermer le Bloc 2]


- [javascript:DivStatus( 'mondiv', '3' ) Ouvrir/Fermer le Bloc 3]


- [javascript:DivStatus( 'mondiv', '4' ) Ouvrir/Fermer le Bloc 4]


- [javascript:MontreTout( 'mondiv' ) Ouvrir tous les Blocs]


- [javascript:CacheTout( 'mondiv' ) Fermer tous les Blocs]


- [javascript:InverseTout( 'mondiv' ) Inverser les Blocs]



Bloc
1



Bloc
2



Bloc
3



Bloc
4




Voila, tu as des exemples de divs qui peuvent d'ouvrir, se cacher et se fermer.

Pour modifier le tout à ta guise, je te laisse le faire toi-même !



Merci d'accepter ma réponse si elle te convient !



L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 120 internautes nous ont dit merci ce mois-ci

Commenter la réponse de la_pin
Signaler Commenter la réponse de la_pin
Messages postés
277
Date d'inscription
mercredi 11 août 2004
Dernière intervention
15 décembre 2005
0
Merci
suffit de mettre la partie de ton form dans les balises

ton form caché

Merci d'accepter ma réponse si elle te convient !

L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire
Commenter la réponse de la_pin
Signaler Commenter la réponse de engel_aurelien
Messages postés
8
Date d'inscription
samedi 24 janvier 2004
Dernière intervention
11 mars 2006
0
Merci
ce qui veut dire que je suis obligé d'avoir 2 formulaires différents?
Commenter la réponse de engel_aurelien
Signaler Commenter la réponse de la_pin
Messages postés
277
Date d'inscription
mercredi 11 août 2004
Dernière intervention
15 décembre 2005
0
Merci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Document sans titre</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>





<form action="" method="post">

Champ 1



Champ 2



Champ 3




Champ 4(caché)



</form>



</html>



Tu n'as qu'un seul formulaire mais un champ est caché.

Tu n'est pas obligé d'avoir 2 formulaires !



Si ma réponse te convient, merci de l'accepter !



L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire
Commenter la réponse de la_pin
Signaler Commenter la réponse de engel_aurelien
Messages postés
8
Date d'inscription
samedi 24 janvier 2004
Dernière intervention
11 mars 2006
0
Merci
oui c'est pas mal mais saurais-tu comment faire pour par exemple en
cliquant sur un lien ou un bouton ça cache ou affiche le reste du
formulaire?



merci beaucoup
Commenter la réponse de engel_aurelien
Signaler Commenter la réponse de engel_aurelien
Messages postés
8
Date d'inscription
samedi 24 janvier 2004
Dernière intervention
11 mars 2006
0
Merci
merci !
Commenter la réponse de engel_aurelien
Signaler Commenter la réponse de abouelfareh1
Messages postés
1
Date d'inscription
dimanche 30 mai 2004
Dernière intervention
7 juin 2005
0
Merci
excelant idée merci
Commenter la réponse de abouelfareh1
Signaler Commenter la réponse de JacquesDW
Messages postés
4
Date d'inscription
samedi 19 février 2005
Dernière intervention
10 août 2005
0
Merci
Bonjour,
ce code marche parfaitement, beau boulot.
Petite question: comment faire pour qu'à l'ouverture d'une page, une DIV soit fermée (cachée) et qu'en cliquent sur le lien "ouvrir/fermer le bloc", la DIV apparaisse ? Je voudrais créer une page de recherche avec un bouton "recherche avancée" qui ouvrirait la DIV contenant des options de recherche plus pointues.

Si vous avez une astuce, je prends :) !
Commenter la réponse de JacquesDW

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

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.