texte caché et ancre

bonjour,

Toute nouvelle en développement web, je viens vous demander un coup de pouce, car je bloque un peu sur ce point.

Mon problème est: J'ai une page en perl/cgi (peu importe) et j'utilise un peu de javascript pour montrer ou cacher certaine partie de la page. Ce que j'aimerais faire c'est que lorsque: je clique sur le bouton "show" d'une des partie, la page se recharge au niveau de cette partie. J'ai évidemment pensé à faire cela avec une ancre, mais je ne sais pas où la placer, pour que le refresh sur celle-ci se fasse uniquement quand on appuie sur le bouton show correspondant.

Voici quelques bouts de codes:
La petite fonction JS :

Code:

1
2
3
4
5
6
7
8
9
10
<SCRIPT language=\"JavaScript\" type=\"text/javascript\">
			function showDiv(divname) {
				document.getElementById(divname).style.visibility = \"visible\";
				document.getElementById(divname).style.display = \"block\";
			}
			function hideDiv(divname) {
				document.getElementById(divname).style.visibility = \"hidden\";
				document.getElementById(divname).style.display = \"none\";
			} 
	</SCRIPT>

et un petit bout de mon html/perl/cgi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
	print "<p><span class=\"but\"><b>&nbsp &nbsp General Information &nbsp &nbsp </b></span>&nbsp &nbsp
	<input type=\"submit\" onclick=\"javascript:showDiv('ginf');\" value=\"Show\" />
	<input type=\"submit\" onclick=\"javascript:hideDiv('ginf');\" value=\"Hide\" />
	<div id=\"ginf\"style=\"display:active\">
	<p><b> HGNC Identifier : </b><a href=\"$HGNCurl$hgnc_id\">$hgnc_id</a> <br /><b> HGNC Approaved Name : </b> $AppN <br /> 
	<b> HGNC Approaved Symbol :</b> $AppS <br /><b> HGNC Alias Symbol : </b>";
	foreach my $e(@alias){if ($e ne $alias[$#alias]){print $e.", ";}else{print $e;}}
	print "<br /><b> HGNC Previous Symbol : </b>";
	foreach my $e(@previous){if ($e ne $previous[$#previous]){print $e.", ";}else{print $e;}}
	print "<br /> <b>Chromosome Band :</b> $ChrBand <br /><b> Locus Type :</b> $LocusType <br />
	<b> Entrez Gene Identifier : </b><a href=\"$EGurl$EntrezGeneId\">$EntrezGeneId</a><br />
	</p></div>";
 
	# Expression Tissue
	print "<hr /><p><span class=\"but\"><b>&nbsp &nbsp Expression Information &nbsp &nbsp</b></span>&nbsp &nbsp
	<input type=\"submit\" onclick=\"javascript:showDiv('expr');\" value=\"Show\" />
	<input type=\"submit\" onclick=\"javascript:hideDiv('expr');\" value=\"Hide\" />
	<div id=\"expr\" style=\"display:none\"><span class=\"align_right\"><a href=\"#toppage\"> top return </a></span><br />
	<p><b>Tissue(s) (Place(s) of expression) : </b><br />";
         ### mettre ancre ici mais quand et ou l'appeler ??? print "<a name='Ancref'></a>";
	foreach my $e(@tissue){if ($e ne $tissue[$#tissue]){print $e.", ";}else{print $e;}}
	print "</p></div>";

J'espère avoir été relativement clair. Merci d'avance de votre aide.

Code:

self.location.href="#"+divname;

Salut,
document.getElementById(divname).style.visibility n'est plus utile car tu as déjà document.getElementById(divname).style.display.

Merci à vous 2, par contre, est-ce qu'il serait possible de savoir où faut-il rajouter

Code:

self.location.href="#"+divname;

?

juste après la ligne ou tu le rend visible ?

Tu le mets à la place de

Code:

1
2
<input type=\"submit\" onclick=\"javascript:showDiv('expr');\" value=\"Show\" />
	<input type=\"submit\" onclick=\"javascript:hideDiv('expr');\" value=\"Hide\" />

je l'aurais mis dans la focntion ...

Je l'ai mis dans la fonction, et ça fonctionne nickel.

Ce qui donne:
Code:

1 2 3 4 5 6 7 8 9 <SCRIPT language=\"JavaScript\" type=\"text/javascript\"> function showDiv(divname) { document.getElementById(divname).style.display = \"block\"; self.location.href=\"#\"+divname; } function hideDiv(divname) { document.getElementById(divname).style.display = \"none\"; } </SCRIPT>
Avec mon ancre, là où je veux:
Code:

1 2 3 4 print "<div id=\"ref\"style=\"display:none\">"; print "<a name='ref'></a>"; print "<p>texte à cacher/afficher</p>"; print "</div>";
Merci à vous, rapide et efficace. :ccool:

__EDIT__

même pas besoin de la ligne:

Code:

print "<a name='ref'></a>";

apparemment c'est la déclaration du div qui sert directement de point d'ancrage (si j'ai bien tout compris :P)