Collapsible Panel using JQuery

Collapsible Panel using JQuery

Hi,
 
I am very new to JQuery. I have implemented a collapsible panel using JQuery with the help of some code I found on the net. It is as shown below.
 

<

 div id ="ContainerPanel" class ="ContainerPanel">

< div id ="header" class ="collapsePanelHeader">

< div id ="dvHeaderText" class ="HeaderContent">

Your Projects

 </ div >

< div id ="dvArrow" class ="ArrowClose">

</ div >

</ div >

< div id ="dvContent" class ="Content" >

< asp : GridView ID ="gridProjectSummary" runat ="server" AutoGenerateColumns ="true"

EmptyDataText ="No Projects to show">

</ asp : GridView >

</ div >

</ div >

 

My script is as below:

$(document).ready(

function() {

$(

"DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowClose").toggle(

function() {

$(

this).parent().next("div.Content").hide("slow");

$(

this).attr("class", "ArrowExpand");

},

function() {

$(

this).parent().next("div.Content").show("slow");

$(

this).attr("class", "ArrowClose");

});

});

 

Everything works fine except that the text in

<div id="dvHeaderText" class="HeaderContent">Your Projects</div>

does not get displayed. Can anyone help me please?

kind regards,

Anu