Solved

Collapsable panel in asp.net

Posted on 2016-07-28
9
35 Views
Last Modified: 2016-08-03
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
0
Comment
Question by:pamela rizk
  • 4
  • 3
9 Comments
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 41734254
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

0
 

Author Comment

by:pamela rizk
ID: 41734285
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
0
 
LVL 19

Assisted Solution

by:Manoj Patil
Manoj Patil earned 500 total points
ID: 41734476
Check this working example
Accordian.zip

This is very light weight and easy to use accordian.
You can easily integrate this in your .aspx page
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Accepted Solution

by:
pamela rizk earned 0 total points
ID: 41734483
thank you but i solved my problem  upon adding in javascript a collapsed event where i collapse all other collapsable panels.
and this solve my problem
below is the code:

function pageLoad() {
            $find("collapsible_navigation").add_collapsed(onIndexcollapsed);
            $find("collapsible_navigation").add_expanded(onIndexexpanded);

            $find("collapsible_Toolbox").add_expanded(onToolboxexpanded);
            $find("collapsible_Toolbox").add_collapsed(onToolboxcollapsed);
        }
 function onToolboxexpanded() {
            $get("<%=ToolboxPanel.ClientID%>").style.display = "block";
            $get("<%=Indexpanel.ClientID%>").style.display = "none";
            var colPanel = $find("collapsible_navigation");
            colPanel.set_Collapsed(true);

            
         }
        function onIndexexpanded() {
            $get("<%=Indexpanel.ClientID%>").style.display = "block";
            $get("<%=ToolboxPanel.ClientID%>").style.display = "none";
            var colPanel = $find("collapsible_Toolbox");
            colPanel.set_Collapsed(true);
            
        }

        function onIndexcollapsed() {
            $get("<%=Indexpanel.ClientID%>").style.display = "none";
           
        }
        
        function onToolboxcollapsed() {
            $get("<%=ToolboxPanel.ClientID%>").style.display = "none";
           
            
        }

Open in new window

0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 41734487
The sample which I have given is working
0
 

Author Comment

by:pamela rizk
ID: 41734594
yes but it is not what i want
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 41734627
The sample which was given in attachment is the exactly thing which you want
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now