jQuery Uncaught Reference error: ClickInfo() is not defined

Question

I am getting an error Uncaught Reference error: ClickInfo() is not defined. I included the required JS source files in the project library.

I am not sure whats wrong in the code...

<div id="dvRegion" runat="server">
          <h3>  <a href="#" id="InfoExpand" onclick="return ClickInfo()">
            <img src="../Styles/img/PlusCircle.png" id="InfoToggle" /></a>
         <asp:Label ID="Label1" runat="server" Text="Info:" /></h3>
            <div id="dvInfoRegion">
                <table> 
                    <tr>
                        <td>
                            <h5> <asp:Label ID="l1" runat="server" Text="a" /></h5>
                        </td>
                        <td>
                            <h6>
                                <div runat="server" id="dv1">
                                </div>
                            </h6>
                        </td>
                   </tr>
                    <tr>
                        <td>
                            <h5> <asp:Label ID="l2" runat="server" Text="b" /></h5>
                        </td>
                        <td>
                            <h6>
                                <div runat="server" id="dv2">
                                </div>
                            </h6>
                        </td>
                   </tr>
                    <tr>
                        <td>
                            <h5> <asp:Label ID="l3" runat="server" Text="c" /></h5>
                        </td>
                        <td>
                            <h6>
                                <div runat="server" id="dv3">
                                </div>
                            </h6>
                        </td>
                   </tr>
                </table>
            </div>
       </div> 


    <script type="text/javascript">
    $(document).ready(function () {
        $("#dvInfoRegion").hide();
        ClickInfo();
    });

    function ClickInfo() {
        toggleRegion($("#dvInfoRegion"), $("#InfoToggle"));
        return false;
    }

    function toggleRegion(region, toggle) {
        if (region.is(":visible")) {
            region.slideUp();
            toggle.attr("src", "../Styles/img/PlusCircle.png");
        }
        else {
            region.slideDown();
            toggle.attr("src", "../Styles/img/MinusCircle.png");
        }
    }

can someone please, have a look at the code and tell me whats wrong? Thanks!

Answer 1

Try event handling and see if this works. It's better syntactically than to write inline javascript.

Remove the onclick attribute from the anchor link

<a href="#" id="InfoExpand">
    <img src="../Styles/img/PlusCircle.png" id="InfoToggle" />
</a>

and

$(document).ready(function () {
    $("#dvInfoRegion").hide();
    ClickInfo();

    $('#InfoExpand ').click(function() {
        ClickInfo();
    });
});