IE: Jquery slidetoggle hides content when it must be shown

Question

So i made this webpage with a photo gallery I have a which serves as the gallery caption. WHen clicked it should show the gallery (done with the slidetoggle from jquery) This works.

EXCEPT (ofcourse) in IE (ONLY when the documents mode is in IE9) There are a few other problems with other IE versions but those are for later.

So the website is here

JQuery (The callback is there so the sidebar grows with the height of the content):

$(".gallery_caption").click(function() {
    $(this).next('.gallery').slideToggle('slow', function () {
        $("#sidebar").animate({height: $("#content_container").outerHeight()});
    });
});

HTML:

<h4 class="gallery_caption">Huntenpop 2010</h4>
<ul class="gallery">
  <li>
    <a href="assets/photos/Huntenpop 2010/fll/13.png" class="lightbox" rel="Huntenpop 2010">
     <img src="assets/photos/Huntenpop 2010/tmb/13.png" alt="Huntenpop 2010" />
    </a>
  </li>
...And so on...
</ul>

Im kindof getting frstrated, anyone who can help me? Thanks in advance!

~Menno

EDIT: It doesnt work in IE9. If in IE press F12, you can select the browser mode and document mode. If IE is on Document Mode: IE 9 the problem occurs.

CSS:

.gallery_caption {
behavior: url('js/PIE.htc');
color:#fff;
font-size:130%;
line-height:30px;
background: #ad3f39;
margin: 15px 0 10px 0;
box-shadow: inset 0 0 8px #333;
-moz-box-shadow: inset 0 0 8px #333;
-webkit-box-shadow:inset 0 0 8px #333;
padding: 0 0 0 12px;
cursor:pointer;
}

.gallery {
    display:none;
}

.gallery li {
    float:left;
    margin-left:15px;
    margin-bottom:10px;
    height:80px;
}

.gallery li a,
.gallery li a:visited,
.gallery li a:active {
    display:block;
    padding:0;
    margin:0;
    border: solid 3px #fff;

}