Collapse siblings Menu list in click

Html:
 <a href="#" class="sample_list"><i class="fa fa-cogs" aria-hidden="true"></i>Administrator <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                            <ul class="gn-submenu">
                                                 <li class="mini_list_agile">
                                                    <asp:HyperLink runat="server" ><i class="fa fa-caret-right" aria-hidden="true"></i>User Setup</asp:HyperLink>

                                                </li>

                                                <li class="mini_list_agile">
                                                    <asp:HyperLink runat="server" ><i class="fa fa-caret-right" aria-hidden="true"></i>Menu Distribution</asp:HyperLink>

                                                </li>

                                            </ul>

Javascript:
        <script type="text/javascript">
            $(document).ready(function () {
                $(".sample_list").click(function () {
                    debugger;
                    //$(".gn-submenu").toggle();
                    $(this).closest('.sample_list').siblings('.gn-submenu').slideToggle();
                    //$(this).closest(".gn-submenu").hide();
                });
            });
</script>