Cacher/afficher quelque chose

Bonjour,

J'ai récupéré sur le net ce code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<style>
.clicTitre
  {
  border-color: #000000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 2px dashed;
  background-color: #eeeeee;
  }
 
.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }
 
.contenant
  {
  display : none;
  border: 1px solid #000000;
  }
</style>

et pour le javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
 
cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>

Ensuite je dois mettre ceci dans ma page html:

Code:

1
2
3
4
5
6
7
8
9
10
 
 <div class="clicTitre">
  <a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
  <div class="clicCacher">
    <a href="javascript:cacheId('contenu');">Fermer</a>
  </div>
Ici je mets le texte que je souhaite afficher ou cacher
</div>

et le résultat est visible ici:
http://www.linuxorable.net/site_test/test.html

Mais je voudrais plutôt quelque chose comme ça:
http://www.linuxorable.net/site_test/test1.html

mais je n'arrive pas à faire en sorte qu'une flèche chasse l'autre et j'ai donc les deux à la fois.

Si quelqu'un peut m'aider à résoudre ce petit problème.

Pascal