hide a gridview in jquery according to link click

Question

am working on asp.net project

and I make a jquery function that hide and show a div onclick on

for every listbox you have a link called manage on click on this link you show or hide the grid view there to manage this list . that's the code :

       <a class="brownlink" id="coursemanage" data-target = "#coursegridview">Manage</a>




 <asp:GridView ID="coursegridview" runat="server"  DataKeyNames="id" DataSourceID="course_mange" SkinID="gridview" PageSize="5">
                            <Columns>
                                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" />
                                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ControlStyle-CssClass="textfield" ReadOnly="True" SortExpression="id" >
<ControlStyle CssClass="textfield"></ControlStyle>
                                </asp:BoundField>
                                <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" ControlStyle-CssClass="textfield"  >
<ControlStyle CssClass="textfield"></ControlStyle>
                                </asp:BoundField>
                                <asp:BoundField DataField="xdate" HeaderText="xdate" SortExpression="xdate" ControlStyle-CssClass="textfield"  >
<ControlStyle CssClass="textfield"></ControlStyle>
                                </asp:BoundField>
                            </Columns>
                        </asp:GridView>
                        <asp:SqlDataSource ID="course_mange" runat="server" ConnectionString="<%$ ConnectionStrings:samy_sarc %>" DeleteCommand="DELETE FROM sarcallcourse WHERE (id = @id)" InsertCommand="INSERT INTO sarcallcourse(id, name, xdate) VALUES (, @name, @xdate)" SelectCommand="SELECT sarcallcourse.* FROM sarcallcourse" UpdateCommand="UPDATE sarcallcourse SET name = @name, xdate = @xdate WHERE (id = @id)">
                            <DeleteParameters>
                                <asp:Parameter Name="id" />
                            </DeleteParameters>
                            <InsertParameters>
                                <asp:Parameter Name="name" />
                                <asp:Parameter Name="xdate" />
                            </InsertParameters>
                            <UpdateParameters>
                                <asp:Parameter Name="name" />
                                <asp:Parameter Name="xdate" />
                                <asp:Parameter Name="id" />
                            </UpdateParameters>
                        </asp:SqlDataSource>





<script type="text/javascript">



        $(function () {
            $('.brownlink').click(function () {
                //Now here `this` would be your anchor element clicked
                var $target = $($(this).data('target')); //Fetch the target and select it
                $target.slideToggle('slow'); //slideToggle
            });
        });

    </script>

that's the code but this code is repeated multiple time in the page because every dropdown menu had a manage

so I need the code to be dynamic mean write one jquery code and added to all manage link on the page and each one hide some different grid view
it didn't work and i need it to be dynamic ... because I use it for multi gridview

i could use any information ... thanks

Answer 1

I try this and its work :

 function initpage() {

     $('#coursegridview').hide();

 }
 initpage();
 function togglediv(div) {

     $("#" + div).toggle('slow');
 }

no matter which link clicked or maybe button or anything just do onclcik :

onclick='togglediv("coursegridview")'

you car write any div you want to toggle

Important Notes: Remember to put the jquery code at the end of your code