Image Categories and separators

Image Categories and separators

Hi,

I have a page with some picture thumbnails and I want when I click the black box (category separator) the pictures in the category to expand/collapse like in the screenshots below:




I have written the following code but it doesn't work:
  1.              
    
              <head>
              
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    var cat1_expanded = false;
    var cat2_expanded = false; 

    function toggleExpand(category_class, expanded) {
     if (expanded) {
     $('.'+category_class).hide('slide', { direction: "left" }, 1000);
     } else {
     $('.'+category_class).show('slide', { direction: "right" }, 1000);
     }
    }
    </script>
    <style type="text/css">
     body .thumbnails {
     background: #4a4a4a;
     }
     .cat-divider {
     background: #EEEEEE;
     }
     .cat1 {
     
     }
     .cat2 {
     
     }
    </style>
    </head>

    <body>
    <div class="thumbnails">
     <img class="cat-divider" src="joomla_logo_black.jpg" width="100" height="100" onclick="toggleExpand('cat1',cat1_expanded)">
     <img class="cat1" src="stisimoselidas.gif" width="100" height="100" >
     <img class="cat1" src="stisimoselidas2.gif" width="100" height="100" >
     <img class="cat1" src="stisimoselidas.gif" width="100" height="100" >
     <img class="cat-divider" src="joomla_logo_black.jpg" width="100" height="100" onclick="toggleExpand('cat2',cat2_expanded)">
     <img class="cat2" src="stisimoselidas2.gif" width="100" height="100" >
     <img class="cat2" src="stisimoselidas.gif" width="100" height="100" >
     <img class="cat2" src="stisimoselidas2.gif" width="100" height="100" >
    </div>
    </body>