Link to home
Start Free TrialLog in
Avatar of pamela rizk
pamela rizkFlag for Lebanon

asked on

Collapsable panel in asp.net

dear all


i have 2 collapsable panel on asp.net web forms
i need upon clicking on teh first collapsabe panel , to open panel1 and hide panel 2
upon clickingon the second collapsable panel to open panel 2 and hide panel 1
also i need to change the bachkround of the selected collapsable panel so i can know on whick button i clicked
Avatar of Manoj Patil
Manoj Patil
Flag of India image

Try This
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestBothVerticalAndHorizontal.aspx.vb"
    Inherits="SoluTest_CollapsiblePanel.TestBothVerticalAndHorizontal" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script type="text/javascript">


        // Animation used to expand/collapse the panel
        this._currentAnimation = null;
        this._anotherAnimation = null;


        this._isBothDisplay = true;


        this._maxHeight = null;
        this._halfHeight = null;
        this._minHeight = null;


        function pageLoad() {


            this._maxHeight = 190;
            this._halfHeight = this._maxHeight / 2;
            this._minHeight = 0;


        }


        function TitleClick(sender) {


            if (sender == $get("TitlePanel2")) {
                var currentContent = $get("ContentPanel2");
                var anotherContent = $get("ContentPanel3");
            } else {
                var currentContent = $get("ContentPanel3");
                var anotherContent = $get("ContentPanel2");
            }


            this._currentAnimation = new AjaxControlToolkit.Animation.LengthAnimation(currentContent, .15, 25, 'style', null, 0, 0, 'px');
            this._anotherAnimation = new AjaxControlToolkit.Animation.LengthAnimation(anotherContent, .15, 25, 'style', null, 0, 0, 'px');


            this._currentAnimation.set_propertyKey('height');
            this._anotherAnimation.set_propertyKey('height');


            this._currentAnimation.add_ended(function() { onAnimateComplete(currentContent); });


            this._isBothDisplay = !this._isBothDisplay;


            if (this._isBothDisplay) {


                currentContent.style.display = "";
                anotherContent.style.display = "";


                var currentStartHeight;
                var anotherStartHeight;


                if (currentContent.style.height && anotherContent.style.height) {
                    currentStartHeight = currentContent.style.height;
                    anotherStartHeight = anotherContent.style.height;
                } else {
                    currentStartHeight = this._minHeight;
                    anotherStartHeight = this._maxHeight;
                }


                // Resume the original state.
                // setup the animation state
                this._anotherAnimation.set_startValue(anotherStartHeight);
                this._anotherAnimation.set_endValue(this._halfHeight);


                this._currentAnimation.set_startValue(currentStartHeight);
                this._currentAnimation.set_endValue(this._halfHeight);


                // do it!
                this._currentAnimation.play();
                this._anotherAnimation.play();


            } else {


                //Collapse the current ContentPanel and expand the other ContentPanel.
                // setup the animation state
                this._currentAnimation.set_startValue(this._halfHeight);
                this._currentAnimation.set_endValue(this._minHeight);


                this._anotherAnimation.set_startValue(this._halfHeight);
                this._anotherAnimation.set_endValue(this._maxHeight);


                // do it!
                this._currentAnimation.play();
                this._anotherAnimation.play();
            }
        }




        function onAnimateComplete(current) {
            if (!this._isBothDisplay) {
                current.style.display = "none";
            }
        }


    </script>


    <style type="text/css">
        .collapseContainer
        {
            height: 250px;
        }
        /* The Horizontal section */.collapsePanelHeaderHorizontal
        {
            width: 30px;
            height: 245px;
            color: Yellow;
            background-color: #000080;
            font-weight: bold;
            float: left;
            padding: 5px;
            cursor: pointer;
            vertical-align: middle;
        }
        .collapsePanelHorizontal
        {
            border: thin solid #0000FF;
            height: 250px;
            background-color: white;
            overflow: visible;
            float: left;
        }
        /* The Vertical section */.collapsePanelHeaderVertical
        {
            height: 20px;
            color: Yellow;
            background-color: #000080;
            font-weight: bold;
            float: none;
            padding: 5px;
            cursor: pointer;
            vertical-align: middle;
        }
        .collapsePanelVertical
        {
            height: 95px;
            border: thin solid #0000FF;
            background-color: white;
            overflow: visible;
            float: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="collapseContainer">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="HoriTitle1" runat="server" CssClass="collapsePanelHeaderHorizontal">
                    <asp:Image ID="HoriImage1" runat="server" ImageAlign="Bottom" ImageUrl="~/Images/expand_blue.jpg" />Ajax
                    <asp:Label ID="HoriLabel1" runat="server" Text="Label" Style="float: right;">(Show details)</asp:Label>
                </asp:Panel>
                <asp:Panel ID="HoriContent1" runat="server" CssClass="collapsePanelHorizontal">
                    ASP.NET AJAX is a free framework for building a new generation of richer, more interactive,
                    highly personalized cross-browser web applications.
                </asp:Panel>
                <cc1:CollapsiblePanelExtender ID="HoriCPE1" runat="server" TargetControlID="HoriContent1"
                    ExpandControlID="HoriTitle1" CollapseControlID="HoriTitle1" TextLabelID="HoriLabel1"
                    ExpandedText="(hide details)" CollapsedText="(show details)" CollapsedImage="~/Images/expand_blue.jpg"
                    ExpandedImage="~/Images/collapse_blue.jpg" SuppressPostBack="true" ImageControlID="HoriImage1"
                    Collapsed="false" EnableViewState="true" CollapsedSize="0" ExpandDirection="Horizontal"
                    ExpandedSize="250">
                </cc1:CollapsiblePanelExtender>
                <asp:Panel ID="HoriContent2" runat="server">
                    <asp:Panel ID="TitlePanel2" runat="server" CssClass="collapsePanelHeaderVertical"
                        onclick="TitleClick(this)">
                        <asp:Image ID="Image2" runat="server" ImageAlign="Right" ImageUrl="~/Images/expand_blue.jpg" />Ajax
                        <asp:Label ID="Label2" runat="server" Text="Label">(Show details)</asp:Label>
                    </asp:Panel>
                    <asp:Panel ID="ContentPanel2" runat="server" CssClass="collapsePanelVertical">
                        The Content2 area.
                    </asp:Panel>
                    <asp:Panel ID="ContentPanel3" runat="server" CssClass="collapsePanelVertical">
                        The Content3 area.ASP.NET AJAX is a free framework for building a new generation
                        of richer, more interactive, highly personalized cross-browser web applications.
                    </asp:Panel>
                    <asp:Panel ID="TitlePanel3" runat="server" CssClass="collapsePanelHeaderVertical"
                        onclick="TitleClick(this)">
                        <asp:Image ID="Image3" runat="server" ImageAlign="Right" ImageUrl="~/Images/collapse_blue.jpg" />Ajax
                        <asp:Label ID="Label3" runat="server" Text="Label">(Show details)</asp:Label>
                    </asp:Panel>
                </asp:Panel>
                <cc1:CollapsiblePanelExtender ID="HoriCPE2" runat="server" TargetControlID="HoriContent2"
                    ExpandControlID="HoriTitle1" CollapseControlID="HoriTitle1" SuppressPostBack="true"
                    ImageControlID="HoriImage1" Collapsed="true" EnableViewState="true" CollapsedSize="600"
                    ExpandDirection="Horizontal" ExpandedSize="850">
                </cc1:CollapsiblePanelExtender>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Open in new window

Avatar of pamela rizk

ASKER

thank you but this is not what i am asking for :
i  have the below code:
this is the first panel:
 <asp:Panel runat="server" ID="click_Indexpanel" Style="height: 130px">


                                            <asp:Image ID="Img_panel_left" runat="server" Style="cursor: pointer" ImageUrl="~/Images/MenuImages/VerticalLeft-en-ico.png" />


                                            <div class="verticalLabel" style="top: -64px; right: 8px; left: -5px; position: relative; text-align: center;">
                                                <asp:Label runat="server" ID="Lbl_verticalIndextext" Text="vertical text"
                                                    Font-Size="8pt" Font-Names="Tahoma" Font-Bold="true" ForeColor="White" Style="cursor: pointer"></asp:Label>
                                            </div>
                                        </asp:Panel>
                                        <AjaxControlToolkit:CollapsiblePanelExtender
                                            ID="collapsible_navigation"
                                            runat="server"
                                            CollapseControlID="click_Indexpanel"
                                            TargetControlID="Index_panel"
                                            ExpandControlID="click_Indexpanel"
                                            Collapsed="true"
                                            ExpandDirection="Horizontal">
                                        </AjaxControlToolkit:CollapsiblePanelExtender>

this is teh code of teh second panel
<asp:Panel runat="server" ID="click_Toolboxpanel" Style="height: 130px">

                                            <asp:Image ID="Img_Toolbox" runat="server" Style="cursor: pointer"
                                                ImageUrl="~/Images/MenuImages/VerticalLeft-en-ico.png" />

                                            <div class="verticalLabel" style="top: -64px; right: 8px; left: -5px; position: relative; text-align: center;">
                                                <asp:Label runat="server" ID="Lbl_verticaltoolboxtext"
                                                    Text="vertical text"
                                                    Font-Size="8pt" Font-Names="Tahoma" Font-Bold="true"
                                                    ForeColor="White" Style="cursor: pointer"></asp:Label>
                                            </div>
                                        </asp:Panel>
                                        <AjaxControlToolkit:CollapsiblePanelExtender
                                            ID="Cpe_Toolbox"
                                            runat="server"
                                            CollapseControlID="click_Toolboxpanel"
                                            TargetControlID="Toolbox_Panel"
                                            ExpandControlID="click_Toolboxpanel"
                                            Collapsed="true"
                                            ExpandDirection="Horizontal">
                                        </AjaxControlToolkit:CollapsiblePanelExtender>

and these are panels that should shown upon clicking on collapsable:
<asp:Panel ID="Index_panel" runat="server" CssClass="PopupPanelCurveStyle_N" BackColor="White"
                                                Style="min-width: 300px; display: none; padding: 5px; position: relative; z-index: 9999999999999999999">
                                                index
                                            </asp:Panel>

<asp:Panel ID="Toolbox_Panel" runat="server" CssClass="PopupPanelCurveStyle_N" BackColor="White"
                                                Style="display: none; padding: 5px;position: relative; z-index: 9999999999999999999">
Toolbox
</asp:Panel>

Open in new window



i need upon clicking on first collapsable to open its panel ionly and hide the panel that shown upon clicking on the second collapsable
SOLUTION
Avatar of Manoj Patil
Manoj Patil
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The sample which I have given is working
yes but it is not what i want
The sample which was given in attachment is the exactly thing which you want