Question

I want jQuery slideToggle() to persist it’s state. By default when the page loads it is collapsed. For the <div> that has the slideToggle() applied there is an asp: button, and when clicked some operation is performed, but probably a page post back occurs.

If the page is refreshed the initial state of the <div> should be visible if the user had previously clicked the slideToggle(). Similarly if the user collapses the <div> again, when the page is refreshed (either F5 or a post back) then the <div> should once again be initially collapsed.

So basically I want to know how to persist the state of slideToggle() at post back? Here is the code:

<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
    });
</script>

<div>
    <div class="panel">
        <table>
            <tr>
                <td>First Name:</td>
                <td><asp:TextBox runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Last Name:</td>
                <td><asp:TextBox ID="LastName" runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><asp:TextBox ID="Email" runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Role Name:</td>
                <td>
                    <asp:DropDownList ID="RoleName" runat="server">
                        <asp:ListItem Text="Select a role" Enabled="true" Value=""> </asp:ListItem>
                        <asp:ListItem Text="DC" Value="DC"> </asp:ListItem>
                        <asp:ListItem Text="ST" Value="ST"> </asp:ListItem>
                        <asp:ListItem Text="AD" Value="AD"> </asp:ListItem>
                        <asp:ListItem Text="CA" Value="CA"> </asp:ListItem>
                        <asp:ListItem Text="GSP" Value="GSP"> </asp:ListItem>
                        <asp:ListItem Text="GDC" Value="GDC"> </asp:ListItem>
                        <asp:ListItem Text="GST" Value="GST"> </asp:ListItem>
                        <asp:ListItem Text="GAD" Value="GAD"> </asp:ListItem>
                        <asp:ListItem Text="GCA" Value="GCA"> </asp:ListItem>
                        <asp:ListItem Text="GSP" Value="GSP"> </asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td><asp:Button ID="Addparticipant" runat="server" Text="Add Participant" /></td>
            </tr>
        </table>
    </div>
    <p class="flip">Show/Hide Panel</p>
</div>

The ASP code:

Protected Sub Addparticipant_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Addparticipant.Click
    Response.Write("Hi it work yaar")
End Sub

Answer 1

I have created an example for you in jsfiddle on how to use cookie to save and retrive the state of your toggle http://jsfiddle.net/6KkCE/

Javascript code:

var panel = $(".panel"), flip = $(".flip"),
    state = $.cookie("ToggleStatus");

flip.click(function() {
    panel.slideToggle("slow", function() {
        $.cookie("ToggleStatus", (state == 1? "0" : "1"));
    });
});

if ((state == 0 && panel.is(':visible'))) {
    panel.slideUp();
}