JavaScript - Masquer/Afficher via 2 images

Bonjour,

J'essaie actuellement de développer un site en PHP de gestion de plannings.
J'ai donc écrit une page qui génère un calendrier, à raison d'un tableau par mois.
Sous chaque tableau, j'ai besoin d'afficher/masquer à souhait un certain nombre d'outils de gestion du planning.

Pour cela, j'ai écrit le code suivant, mais il ne fonctionne pas!

Voici le code (en HTML):
<div id='ModuleOutilsAfficher.06/2010'><hr/ class='BarreSsCalendrier'><img src='FichiersGestPlanning/Afficher.png' title='Afficher les outils du calendrier' alt='Afficher les outils du calendrier' id='ImgOutilsCalendrierAfficher.06/2010' onClick="document.getElementById('OutilsCalendrier.06/2010').style.display='block' && document.getElementById('ModuleOutilsMasquer.06/2010').style.display='block' && document.getElementById('ModuleOutilsAfficher.06/2010').style.display='none'"/></div><div class='ModuleOutilsMasquer' id='ModuleOutilsMasquer.06/2010'><hr/ class='BarreSsCalendrier'><img src='FichiersGestPlanning/Masquer.png' title='Masquer les outils du calendrier' alt='Masquer les outils du calendrier' id='ImgOutilsCalendrierMasquer.06/2010' onClick="document.getElementById('OutilsCalendrier.06/2010').style.display='none' && document.getElementById('ModuleOutilsMasquer.06/2010').style.display='none' && document.getElementById('ModuleOutilsAfficher.06/2010').style.display='block'"/></div><div class='OutilsCalendrier' id='OutilsCalendrier.06/2010'><p>Toto</p></div>


Et le code CSS qui lui est associé:
.BarreSsCalendrier {
float: left;
width: 90%;
margin: 10px 10px 30px 50px;
}

.OutilsCalendrier {
display: none;
}

.ModuleOutilsMasquer {
display: none;
}

Je ne comprend pas pourquoi sa ne marche pas...

Une idée?