Why won't my toggle work? jQuery

So I have a project I'm working on, and my toggle function is not working. Can somebody tell me what's wrong?

$('.col1-text').click(function() {
    $(this).find('.col1-info').toggle(function() {
        $(this).hide('slow');
        $('img.toggle').attr('src','http://localhost/balisouladventures/images/col1-closed.png');
    },function() {
        $(this).show('slow');
        $('img.toggle').attr('src','http://localhost/balisouladventures/images/col1-open.png');
    });
});

And my HTML:

            <div class="col1-text">
                <h5><a href="javascript:void(0);"><img src="images/col1-open.png" width="17" height="9" alt="" /> Living Your Spiritual Connection</a></h5>
                <div class="col1-info">
                    <img class="thumb" src="开发者_如何转开发images/col1-thumb.png" width="77" height="77" alt="" />
                    <ul>
                        <li>Malesuada fames ac</li>
                        <li>turpis habitant morbi</li>
                        <li>tristique senectus et netus</li>
                        <li>et malesuada fames ac</li>
                        <li>turpis et malesuada fames</li>
                    </ul>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac</p> <div class="clear"></div>
                </div>
                <img class="spacer" src="images/main-listspacer.png" width="310" height="2" alt="" />
            </div>

Well, you're binding two click events (.toggle()) to your .col1-info element, each time you click on the element .col1-text. This doens't really make much sense at all, I guess this is where your problem is located.

You probably should bind those click handlers with .live() instead, somewhere in your .ready() handler.

$(function() {
    $('div.col1-text').live('click', function() {
        var $self = $(this),
            $info = $self.find('div.col1-info'),
            $img  = $self.find('img.toggle');

        if( $info.is(':hidden') ) {
            $info.show('slow');
            $img.attr('src','http://localhost/balisouladventures/images/col1-closed.png');

        }
        else {
            $info.hide('slow');
            $img.attr('src','http://localhost/balisouladventures/images/col1-closed.png');
        }
    });
});

You need to set class="toggle" for your <img> in the <h5> tag to make this work.

A slighty modified version in action here: http://www.jsfiddle.net/MQsbS/