How to get a jQuery slideToggle to work

How to get a jQuery slideToggle to work

hi Everyone,

I have a project which as some hidden links that I toggle to display.

I have a nice neat jQuery function for that.

The trouble is that I also have a 2nd link that I cannot get to work for the slideToggle. I know it has something to do with targeting the class "lecture-links" and I have tried all sorts of combinations of "next" "closest" and other ideas but cannot get the 2nd link to work.

Below are the two functions.

I want them both to slideToggle the "lectures-link" div.

The first one works great with the "category-link" link.

The 2nd one is not working. for the "category-image" link.  

Below these links is the markup code from the page, wlth all the elements

I would greatly appreciate any insight into this problem!

Thank you!

/**
 * jQuery toggle function
*/



    $(document).ready(function($){
        $('.lecture-links',this).hide();
    });



    $(document).ready(function(){
        $(".category-link").click(function() {
        $(this).next('.lecture-links').slideToggle();
        return false;
        });
    });



    $(document).ready(function($){
        $(".category-image").click(function(){
          $('.lecture-links',this).slideToggle();
          return false;
        });
    });




    <div class="lecture-categories">

        <div id="category-one" class="category">
            <a href="#" class="category-image">
                &nbsp;
            </a>
            <a class="category-link" href="#">Category title one here &rtrif;</a>
            <div class="lecture-links">
                <a href="#">Lecture one</a>
                <a href="#">Lecture one</a>
                <a href="#">Lecture one</a>
            </div>
        </div>
        <div id="category-two" class="category">
            <a href="#" class="category-image">
                &nbsp;
            </div>
            <a class="category-link" href="#" onclick="return false;">Category title one here &rtrif;</a>
            <div class="lecture-links">
                <a href="#">Lecture one</a>
                <a href="#">Lecture one</a>
                <a href="#">Lecture one</a>
            </div>
        </div>
        <div id="category-three" class="category">
            <a href="#" class="category-image">
                &nbsp;
            </div>
            <a class="category-link" href="#" onclick="return false;">Category title one here &rtrif;</a>
            <div class="lecture-links">
                <a href="#">Lecture one</a>
                <a href="#">Lecture one</a>
                <a href="#">Lecture one</a>
            </div>
        </div>

    </div>