Collapsible Panel extender CSS issue with Moss

Since I start implementing AJAX in moss, we are facing problem with most of the every control.
Asp.Net Ajax Controls is not easy to integrate with SharePoint.

In my previous post I solve problem with Tab Container with header display issue.

Now, here I’m explaining collapsible panel extender issue with SharePoint /Moss.
I am facing a problem that Collapsible Panel is not collapsing in SharePoint/Moss webpart.

By default it should hide the content area and on clicking on the header it should expand the content area.
But it is not working as easily like it is working in Simple Asp.Net application.

In my case collapsible panel is not hiding content, it just flicker and again come to the same position as it is in default position.

So from this behavior what I think is that if it is (same code) working in standard asp.net than there is not any problem in control but because it is rendering in SharePoint and because of SharePoint’s JavaScript/JS and its CSS it conflicting with something while rendering.

So first I start with CSS because defiantly it’s easy.

Now if you check your AjaxControlToolKit -- > sample website --> StyleSheet.css

You will find two css class under “/*CollapsiblePanel*/”

One is “.collapsePanel”
Other is “.collapsePanelHeader”

So I used it in my .ascx (sorry I forget to explain that I’m using user control for webpart)
By adding <style type="text/css" > </style> tag.

As we are not facing any problem in header so there is no need to touch that CSS.

So by trial and error I found one solution.

I have to add in the div of content panel

style="height:0px;position:absolute;”

And have to set two properties of “CollapsiblePanelExtender”

CollapsedSize="0"
ExpandedSize="700"

Here is the working code

<style type="text/css" >
/* IE theme – Backgrounds */
.collapsePanel {
background-color:white;
overflow:hidden;
/*height:0px;
position:absolute;*/
}

.collapsePanelHeader{
width:100%;
height:30px;
background-image: url(images/bg-menu-main.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}
</style>

<asp:Panel ID="Panelheader" runat="server" style="cursor:pointer;" >
<div id="div1" runat="server" >want to check its working or not ?</div>
</asp:Panel>
<br />
<asp:Panel id="Panelcontent" runat="server" >
<div id="div2" style="height:0px;position:absolute;" >
your data will go here
<br />
<br />
<br />
it's working ....
</div>
</asp:Panel>
<cc1:CollapsiblePanelExtender
ID="CPanelGeneralInformation"
runat="server"
TargetControlID="Panelcontent"
CollapseControlID="Panelheader"
ExpandControlID="Panelheader"
Collapsed="true"
SuppressPostBack="true"
AutoCollapse="false"
AutoExpand="false"
ScrollContents="false"
ExpandDirection="vertical"
CollapsedSize="0"
ExpandedSize="700"
>
</cc1:CollapsiblePanelExtender>