fonction GENERIQUE pour afficher/cacher des DIV

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : fonction GENERIQUE pour afficher/cacher des DIV

sarahz

Bonjour,

Je cherche à afficher/cacher des éléments au clic sur un lien.

(page de question/reponse : on affiche la reponse au clic sur la question.

mon code marche mais il n est pas generique :

Code :

<style type="text/css" media="screen">
div.visible {
visibility:visible;
}
div.hidden {
visibility:hidden;
}
</style>
<script type="text/javascript">
function part1() {
var rep01 = document.getElementById('rep01');
if ( rep01.className == 'hidden' ) {
rep01.className = 'visible';
} else {
rep01.className = 'hidden';
}
}
function part2() {
var rep02 = document.getElementById('rep02');
if ( rep02.className == 'hidden' ) {
rep02.className = 'visible';
} else {
rep02.className = 'hidden';
}
}
</script>
</head>
<body>
<div id="qu01"><a onclick="part1();" href="#">Question 1</a></div>
<div class="hidden" id="rep01">reponse a la question 1</div>
<div id="qu02"><a onclick="part2();" href="#">Question 2</a></div>
<div class="hidden" id="rep02">reponse a la question 2</div>
</body>
</html>

J'ai bien tenté de faire une fonction générique mais... ca ne marche pas :

Code :

<style type="text/css">
div.visible {
visibility:visible;
}
div.hidden {
visibility:hidden;
}
</style>
<script type="text/javascript">
function showRep(id){
id = document.getElementById(id);
if ( id.className == 'hidden' ) {
id.className= 'visible';
} else {
id.className= 'hidden';
}
</script>
</head>
<body>
<div id="qu01"><a onclick="showRep("rep01" );" href="#">Question 1</a></div>
<div class="hidden" id="rep01">reponse a la question 1</div>
<div id="qu02"><a onclick="showRep("rep02" );" href="#">Question 2</a></div>
<div class="hidden" id="rep02">reponse a la question 2</div>
</body>

A l'aide !!
Merci (je sais que c'est basique comme question, mais je vous jure que j ai cherché avant de poster !)
XXX

Publicité

tpierron

Évidemment que ça ne fonctionne pas ton code HTML est foireux. Indice: regarde la valeur que tu donne à l'attribut onclick.

sarahz

.. onclick="ShowRep('rep01');" ?
ou je suis completement a cote... ?

tpierron

Bah ouais.

Edit: je voulais dire, c'est bien ça qu'il fallait remplacer, pas que t'étais à coté de la plaque, hein ...

Message édité par tpierron le 22-02-2008 à 19:44:58

yann39

⛅⏰♫♪☹☕

Bof.

Moi je ferais :

Code :

function changervisibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none" )
{
targetElement.style.display = "" ;
}
else
{
targetElement.style.display = "none" ;
}
}

Et là tu appel toujours cette même fonction.

Dans ton cas:

Code :

<div><a onclick="changervisibilite(rep01);" href="#">Question 1</a></div>
<div id="rep01" style="display:none;">reponse a la question 1</div>

Par contre je n'utiliserais pas href="#" car ca va te faire remonter en haut de la page, utilise plutot :

Code :

<div><a href="javascript:changervisibilite('rep01')">Question 1</a></div>
<div id="rep01" style="display:none;">reponse a la question 1</div>

Message cité 1 fois

sarahz

Merci beaucoup !
C'est super

anapajari

s/travail/glanding on hfr/gs;

yann39 a écrit :

Par contre je n'utiliserais pas href="#" car ca va te faire remonter en haut de la page, utilise plutot :

Code :

<div><a href="javascript:changervisibilite('rep01')">Question 1</a></div>
<div id="rep01" style="display:none;">reponse a la question 1</div>

Nan mais nan hein
on mets pas javascript dans un attribut href.
Les "moins pires pratiques" (et encore, c'est pas le top) voudraient plutot qu'on fasse:

Code :

<a href="unPagePourExpliquerQueSansJsMonSiteMarchePas.html" onclick="return maFonction()"> ...

et ensuite dans ta fonction

Code :

function maFonction(){
/*** ...
des trucs
... ***/
return false;
}

---------------
Software and cathedrals are much the same - first we build them, then we pray.

yann39

⛅⏰♫♪☹☕

Citation :

Nan mais nan hein
on mets pas javascript dans un attribut href.

Pourquoi ?
J'ai déjà entendu parler de cette histoire mais les arguments restent assez vague...

J'y vois que des avantages moi mis à part que l'utilisateur qui n'a pas js activé ne verra rien.

Message cité 2 fois

anapajari

s/travail/glanding on hfr/gs;

yann39 a écrit :

J'y vois que des avantages moi

lesquels :??:

yann39 a écrit :

mis à part que l'utilisateur qui n'a pas js activé ne verra rien.

ce qui est un inconvénient majeur tu en conviendras ...

---------------
Software and cathedrals are much the same - first we build them, then we pray.

FlorentG

Unité de Masse

yann39 a écrit :

J'y vois que des avantages moi mis à part que l'utilisateur qui n'a pas js activé ne verra rien.

Ou celui qui fait Ctrl+Click ou Shift+Click pour ouvrir dans une nouvelle fenêtre/nouvel onglet non plus

Publicité

yann39

⛅⏰♫♪☹☕

Bon en effet il n'y a que des avantages,
va falloir que je mette à jour mon code.

Merci pour la remarque

FORUM HardWare.fr

Programmation

HTML/CSS

fonction GENERIQUE pour afficher/cacher des DIV

Sujets relatifs
Afficher une arborescence	QT4 Comment afficher un objet QPainter dans une fenetre principale??
[Access] Filtrer liste déroulante en fonction d'une autre	Fonction SQL tte simple
Aide fonction formattage tag Dailymotion / Youtubebib	[JS] fonction item()
Afficher " en html avec un echo php ??!!	la fonction CHMOD
Animation flash veut pas s afficher. Help !!!!!	itextsharp Afficher HTML
Plus de sujets relatifs à : fonction GENERIQUE pour afficher/cacher des DIV

Page générée en 0.071 secondes