ASP.NET

Vertical Collapsible Panel Extender RSS

3 replies

Last post Aug 24, 2011 02:09 AM by BU XI - MSFT

‹ Previous Thread|Next Thread ›

- Reply
girishchanna...

Member

58 Points

51 Posts

Vertical Collapsible Panel Extender

Aug 21, 2011 07:34 PM|LINK

Hi ,

Am using CollapsiblePanelExtender as shown in below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">
</asp:ScriptManager>

    <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
            TargetControlID="ContentPanel"
            ExpandControlID="TitlePanel"
            CollapseControlID="TitlePanel"
            Collapsed="True"
            TextLabelID="Label1"
            ExpandedText="(Hide Details...)"
            CollapsedText="(Show Details...)"
            ImageControlID="Image1"
            ExpandedImage="~/images/collapse_blue.jpg"
            CollapsedImage="~/images/expand_blue.jpg"
            SuppressPostBack="true"
            ExpandDirection ="Vertical"
            ScrollContents="true" >
    </ajaxToolkit:CollapsiblePanelExtender>

     <asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
           <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>  
           Giri ?  
           <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
    </asp:Panel>

    <asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">

    </asp:Panel>

    </form>
</body>
</html>

Stylesheet :

.collapsePanel {
width: 640px;
height:0px;
background-color:white;
overflow:hidden;
}

.collapsePanelHeader{
width:640px;
height:20px;
color: Yellow;
background-color: Black;
font-weight:bold;
float:left;
padding:5px;
cursor: pointer;
vertical-align: middle;
}

Please suggest how to make this to work as vertical expander.

Thank you

Giri
- Reply
chetan.sarod...

All-Star

65719 Points

11133 Posts

Re: Vertical Collapsible Panel Extender

Aug 22, 2011 03:32 AM|LINK

Hi,

Can you post a snapshot to explain your issue?

Vertical is the default setting of ExpandDirection. When I click the header I provided, it will expend vertically as usual.

Is the panel not expended when you click it so you can't see the control inside? Did you encounter any client error?

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
- Reply
girishchanna...

Member

58 Points

51 Posts

Re: Vertical Collapsible Panel Extender

Aug 22, 2011 08:32 PM|LINK

Hi ,

above code working fine.

But i want that panel to collapse from right to left instead of bottom to top or top to bottom.

I want to use as a splitter .

Thank you

Giri
- Reply
BU XI - MSFT

All-Star

22367 Points

2704 Posts

Microsoft

Re: Vertical Collapsible Panel Extender

Aug 24, 2011 02:09 AM|LINK

Hello

CollapsiblePanel does not work in that way. If you don't mind using jQuery, you may look at this tutorial, http://www.ilovecolors.com.ar/jquery-collapsible-panel/

Demo, http://www.ilovecolors.com.ar/wp-content/uploads/collapsible/#

Basically, it uses jQuery's toggle method, http://api.jquery.com/toggle/

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
- Marked as answer by BU XI - MSFT on Aug 26, 2011 03:57 AM