Expand Arrow for collapsible panel is not working

See more:

ASP.NET

Javascript

HTML

I have a checkbox followed by a link and then a collapsible panel arrow. When I click on the checkbox or the link a collapsible panel must expand. Now the issue is that when I click on either the checkbox or the link the panel arrow does not rotate. The code that I have used is

<asp:PlaceHolder ID="phSchoolOfTheRegion" runat="server" Visible="false">
        <div class="styled sign-off">
            <fieldset>
                <div class="fright w305 margin-top-12">
                    <p style="margin-removed-2px;">
                        <asp:Literal ID="LabeluxSchoolOfTheRegionCreated" runat="server"></asp:Literal></p>
                    <p style="margin-removed-19px;">
                        <asp:Literal ID="LabeluxSchoolOfTheRegionRemoved" runat="server"></asp:Literal></p>
                </div>
                <ol class="margin-bottom-0 collapsible-checkbox-container">
                    <li class="header" style="float: left !important; width: 100% !important;">
                        <asp:CheckBox ID="uxSchoolOfTheRegion" runat="server" data-collapsiblepanel="uxDivSchoolOfTheRegion" CssClass="uxSignOffCollaps-1x"  AutoPostBack="true" OnCheckedChanged="uxSchoolOfTheRegion_CheckedChanged" />
                        <a href="java<!-- no -->script:{}" style="font-weight:bold; color:black;" class="panel-toggle-link" data-togglepanel="<%=uxDivSchoolOfTheRegion.ClientID%>">School of the Region</a>
                    </li>
                </ol>
                <span class="signoff-collapse-head collapsible-heading">colapse</span>
                <asp:Panel id="uxDivSchoolOfTheRegion" CssClass="sign-off-form-wrapper showhide-heading" runat="server" DefaultButton="btnSaveSchoolOfTheRegion">
                    <ol class="sign-off paddingLeft-20 margin-bottom-0">
                        <li>
                            <asp:Label runat="server" Text="State the decrease in car use and the dates:" AssociatedControlID="uxDecreaseCarUse"></asp:Label>
                            <asp:HiddenField ID="HiddenFieldSchoolOfTheRegionID" runat="server" />
                        </li>
                        <li>
                            <asp:RequiredFieldValidator ID="rvDecreaseCarUse" Enabled="true" ValidationGroup="SaveSchoolOfTheRegion" runat="server"
                                ErrorMessage="" Text="*" ControlToValidate="uxDecreaseCarUse" CssClass="required"><span>* Please state the decrease in car use and the dates</span></asp:RequiredFieldValidator>
                        </li>
                        <li>
                            <asp:TextBox ID="uxDecreaseCarUse" runat="server" MaxLength="100" ValidationGroup="SaveSchoolOfTheRegion"></asp:TextBox>
                        </li>
                        <li>
                            <asp:Label runat="server" Text="Top 3 achievements - what was the impact, who was affected, who participated?" AssociatedControlID="uxTop3Achievements"></asp:Label>
                        </li>
                        <li>
                            <asp:RequiredFieldValidator ID="rvTop3Achievements" Enabled="true" ValidationGroup="SaveSchoolOfTheRegion" runat="server"
                                ErrorMessage="" Text="*" ControlToValidate="uxTop3Achievements" CssClass="required">
                            <span>* Please state top 3 achievements - what was the impact, who was affected and who participated</span></asp:RequiredFieldValidator>
                        </li>
                        <li>
                            <asp:TextBox ID="uxTop3Achievements" runat="server" MaxLength="500" TextMode="MultiLine" Rows="5" CssClass="MultiLineTextArea"
                                data-span="uxTop3AchievementsCountdown" ValidationGroup="SaveSchoolOfTheRegion"></asp:TextBox>
                            <br />
                            <div class="width80p">
                                <span id="uxTop3AchievementsCountdown" class="countdown" style="float: right;">500 characters remaining.</span>
                            </div>
                        </li>
                        <li>
                            <asp:Label runat="server" Text="Why does the school deserve the award? Include information:" AssociatedControlID="uxWhyDeserveAward"></asp:Label>
                        </li>
                        <li>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Enabled="true" ValidationGroup="SaveSchoolOfTheRegion" runat="server"
                                ErrorMessage="" Text="*" ControlToValidate="uxWhyDeserveAward" CssClass="required">
                            <span>* Please state why does the school deserve the School Of The Region</span></asp:RequiredFieldValidator>
                        </li>
                        <li>
                            <asp:TextBox ID="uxWhyDeserveAward" runat="server" MaxLength="500" TextMode="MultiLine" Rows="5" CssClass="MultiLineTextArea"
                                data-span="uxWhyDeserveAwardCountdown" ValidationGroup="SaveSchoolOfTheRegion"></asp:TextBox>

                            <br />
                            <div class="width80p">
                                <span id="uxWhyDeserveAwardCountdown" class="countdown" style="float: right;">500 characters remaining.</span>
                            </div>
                        </li>
                        <li class="sign-off-button-row">
                            <p>
                                <asp:Button ID="btnSaveSchoolOfTheRegion" runat="server" Text="Save" CssClass="button" ValidationGroup="SaveSchoolOfTheRegion"
                                    OnClick="btnSaveSchoolOfTheRegion_Click" />
                            </p>
                            <p class="paddingLeft-20">
                                <asp:ValidationSummary ID="vsSaveSchoolOfTheRegion" ValidationGroup="SaveSchoolOfTheRegion" runat="server"
                                    HeaderText="Please complete all of the fields before saving." CssClass="alert validation CustomVs" />
                            </p>
                        </li>
                    </ol>
                </asp:Panel>
            </fieldset>
        </div>
    </asp:PlaceHolder>
                    </li>

<script type="text/javascript">

if ($("#<%=HiddenFieldSchoolOfTheRegionID.ClientID %>").val() == '' && document.getElementById("<%=uxSchoolOfTheRegion.ClientID %>").checked == true) {
            $("#<%=uxDivSchoolOfTheRegion.ClientID %>").css("display", "block");
        }

Can anyone please help me to fix the issue to change the behavior of the panel arrow on clicking the link or checkbox. The arrow behavior changes only when I particualry click on the arrow.