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

engel_aurelien 8 Messages postés samedi 24 janvier 2004Date d'inscription 11 mars 2006 Dernière intervention - 24 mai 2005 à 11:50 - Dernière réponse : JacquesDW 4 Messages postés samedi 19 février 2005Date d'inscription 10 août 2005 Dernière intervention
- 10 août 2005 à 17:35
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

8 réponses

Meilleure réponse
la_pin 277 Messages postés mercredi 11 août 2004Date d'inscription 15 décembre 2005 Dernière intervention - 26 mai 2005 à 12:50
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

Merci la_pin 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 120 internautes ce mois-ci

Commenter la réponse de la_pin
la_pin 277 Messages postés mercredi 11 août 2004Date d'inscription 15 décembre 2005 Dernière intervention - 24 mai 2005 à 17:45
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
engel_aurelien 8 Messages postés samedi 24 janvier 2004Date d'inscription 11 mars 2006 Dernière intervention - 25 mai 2005 à 09:29
0
Merci
ce qui veut dire que je suis obligé d'avoir 2 formulaires différents?
Commenter la réponse de engel_aurelien
la_pin 277 Messages postés mercredi 11 août 2004Date d'inscription 15 décembre 2005 Dernière intervention - 25 mai 2005 à 12:36
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
engel_aurelien 8 Messages postés samedi 24 janvier 2004Date d'inscription 11 mars 2006 Dernière intervention - 26 mai 2005 à 09:41
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
engel_aurelien 8 Messages postés samedi 24 janvier 2004Date d'inscription 11 mars 2006 Dernière intervention - 27 mai 2005 à 09:32
0
Merci
merci !
Commenter la réponse de engel_aurelien
abouelfareh1 1 Messages postés dimanche 30 mai 2004Date d'inscription 7 juin 2005 Dernière intervention - 7 juin 2005 à 17:25
0
Merci
excelant idée merci
Commenter la réponse de abouelfareh1
JacquesDW 4 Messages postés samedi 19 février 2005Date d'inscription 10 août 2005 Dernière intervention - 10 août 2005 à 17:35
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

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.