Une fonction qui ne donne rien

Bonjour,
J'ai créer une fonction pour cacher un div, en montrer un et une image. Rien à faire ça ne marche pas et je ne vois pas pourquoi.
le code :

<div id="petites" style="width:99%;margin-left:1.1%;">
<p style="text-align:center;font-weight:bold;">Cliquez sur photo pour l'agrandir</p>
 <ul id="ul_liste">
  <li><img src="manifestations_passees/images 2016/brocante 2016 001 1.jpg" alt="" onclick="javascript:photos_brocante('image01');" /></li>

 </ul>
</div>
<div id="grandes" >
<img src="manifestations_passees/images 2016/brocante 2016 001.jpg" style="display:none;" alt="" id="image01" onclick="javascript:cacher('image01');" />

</div>

la fonction

function photos_brocante(id){
 document.getElementById(id).style.display = "inline";
 document.getElementById('petites').style.display = "none";
 document.getElementById('grandes').style.display = "inline";
}

merci de me dire où est le problème
ps
pour le style, je mettrai des class quand tout fonctionnera

EDIT : Ajout du langage dans les balises de code pour avoir la couleur...