CODEWITHSUNDEEP
c#asp.net
Dharam Rai
Dharam Rai

Reputation: 81

How to give collapse and expand effect to panel on click event

Dear All I have multiple asp panel inside my web page which are set to visible=false on page load and gets open when particular linkbutton is clicked which works fine, but now I want to give it a slow motion effects or collapse and expand effect accordingly. Can anyone share their experience please.

protected void LinkButton3_Click(object sender, EventArgs e)
{
    pnlWall.Visible = true;
    pnlShareHome.Visible = false;
}

Upvotes: 1

Views: 6776

Answers (2)

Balasubramanian Ramamoorthi
Balasubramanian Ramamoorthi

Reputation: 67

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationFancyBox.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/jquery.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function () {
 
            var last = $('#<%= recoverydisplay.ClientID %>').val();

            if (last == '0') {
                $('#panel1').hide();
            }
            else {
                 $('#panel1').show();
            }


            $("#btnrecovery").click(function () {
                if ($('#panel1').is(':visible')) {
                    $('#panel1').hide();
                    $("#btnrecovery").prop("value", "Show recovery");
                    $('#<%= recoverydisplay.ClientID %>').val('0');
                }
                else {
                    $('#panel1').show();
                    $("#btnrecovery").prop("value", "Hide recovery");
                     $('#<%= recoverydisplay.ClientID %>').val('1');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <div id="panel1" style="border:1px solid black;display:none" >
         Panel1 content<br />
         <asp:Button runat="server" Text="Panel1 button" Width="200px" />
    </div>

       <input type="button" id="btnrecovery" value="show Recovery"/>

       <asp:HiddenField ID="recoverydisplay" runat="server" value="0"/>

       <asp:Button runat="server" Text="Panel2 button" Width="200px" />
    </form>
</body>
</html>

Upvotes: 0

VDWWD
VDWWD

Reputation: 35514

You can use jQuery to show and hide panels (which are just <div>'s in HTML). It has sliding possibilities and saves a round trip to the server. 

<asp:Panel ID="Panel1" runat="server" style="display: none;">
    content
</asp:Panel>

<input type="button" value="Slide Panel" onclick="slidePanel('<%= Panel1.ClientID %>')" />

<script type="text/javascript">
    function slidePanel(div) {
        if ($('#' + div).css('display') == 'none') {
            $('#' + div).slideDown('medium', function () { });
        } else {
            $('#' + div).slideUp('medium', function () { });
        }
    }
</script>

However if you need to do a PostBack because of the content in Panel1, you can call the slidePanel function when done.

protected void Button1_Click(object sender, EventArgs e)
{
    Panel1.Visible = true;

    //set the dom visibility to none
    Panel1.Attributes.Add("style", "display:none");

    //call the function to slide the panel open
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "slidePanel", "slidePanel('" + Panel1.ClientID + "')", true);

    //or with a 1 second delay (1000 ms)
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "slidePanel", "setTimeout(function () { slidePanel('" + Panel1.ClientID + "'); }, 1000);", true);
}

Upvotes: 2

Related Questions