Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

Question

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.

Am I going the right way about this? Hope you can help! Here's my HTML and JS code:

HTML:

<div id="result_location">
     <h3>MainText Here</h3>
        </div>

        <div class="result_menu">
            <div id="a_column">
                <h4>text</h4>
            </div>

            <div id="b_column">
                <h4>text</h4>
            </div>

            <div id="c_column">
                <h4>text</h4>
             </div>

            <div id="d_column">
                <h4>text</h4>
             </div>
         </div>
    </div>
</div>

JS:

$(document).ready(function() {
    $('#result_location').click(function() {
            $('.result_menu').slideToggle("fast");
    });
});

Answer 1

It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!