asked on

Jquery collapsible panel

Hello experts.
I use the jquery collapsible panel downloaded from:http://www.codedigest.com/Articles/jQuery/233_Building_Collapsible_Panel_Control_using_jQuery_in_ASPNet_Page.aspx

Now i want to add the open-hide function clicking on the div(class=collapsePanelHeader)so that i get the show hide function whereever i click on this div and of course changing the Arrow(Arrowclose and ArrowExpand) like in the ajax-example(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx)
I have added the function but arrows don't change when i click on the above div.
Any help?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<style> 
/*CollapsiblePanel*/ 
.ContainerPanel 
{ 
       width:400px; 
       border:1px; 
       border-color:#1052a0;      
       border-style:double double double double; 
} 
.collapsePanelHeader 
{ 
       width:400px; 
       height:30px; 
       background-image: url(images/bg-menu-main.png); 
       background-repeat:repeat-x; 
       color:#FFF; 
       font-weight:bold; 
} 
.HeaderContent 
{ 
       float:left; 
       padding-left:5px; 
} 
.Content 
{ 
       
} 
.ArrowExpand 
{ 
       background-image: url(images/expand_blue.jpg); 
       width:13px; 
       height:13px; 
       float:right; 
       margin-top:7px; 
       margin-right:5px; 
} 
.ArrowExpand:hover 
{ 
       cursor:hand; 
} 
.ArrowClose 
{ 
       background-image: url(images/collapse_blue.jpg); 
       width:13px; 
       height:13px; 
       float:right; 
       margin-top:7px; 
       margin-right:5px; 
} 
.ArrowClose:hover 
{ 
       cursor:hand; 
} 
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
        <script language="javascript"> 
            $(document).ready(function() { 
                $(".collapsePanelHeader").toggle( 
                function() { 
                    $(this).next("div.Content").show("fast"); 
                    $(this).("div.ArrowExpand").attr("class", "ArrowClose"); 
                }, 
                function() {                    
                    $(this).next("div.Content").hide("fast"); 
                    $(this).("div.ArrowClose").attr("class", "ArrowExpand"); 
                }); 
				
            });    
        </script>
</head> 
<body>
<div id="ContainerPanel" class="ContainerPanel"> 
        <div id="header" class="collapsePanelHeader"> 
            <div id="dvHeaderText" class="HeaderContent">jQuery Collapsible Panel1</div> 
            <div id="dvArrow" class="ArrowExpand"></div> 
        </div> 
        <div id="dvContent" class="Content" style="display:none"> 
           /*Content*/ 
        </div> 
   </div> 
   <div id="Div1" class="ContainerPanel"> 
        <div id="Div2" class="collapsePanelHeader"> 
        <div id="Div11" class="HeaderContent">jQuery Collapsible Panel2</div> 
            <div id="Div3" class="ArrowExpand"></div> 
        </div> 
        <div class="Content" style="display:none"> 
            /*Content*/ 
        </div> 
   </div>  

   <div id="Div4" class="ContainerPanel"> 
        <div id="Div5" class="collapsePanelHeader"> 
             <div id="Div12" class="HeaderContent">jQuery Collapsible Panel3</div> 
            <div id="Div6" class="ArrowExpand"></div> 
        </div> 
        <div class="Content" style="display:none"> 
           /*Content*/ 
        </div> 
    </div>    

    <div id="Div7" class="ContainerPanel"> 
        <div id="Div8" class="collapsePanelHeader"> 
             <div id="Div13" class="HeaderContent">jQuery Collapsible Panel4</div> 
            <div id="Div9" class="ArrowExpand"></div> 
        </div> 
        <div id="Div10" class="Content" style="display:none"> 
           /*Content*/ 
        </div> 
      </div>
</body>
</html>

Open in new window

hielo

save as test.html and try it:

        <script language="javascript"> 
            $(document).ready(function() { 
                $(".collapsePanelHeader").toggle( 
                function() { 
                    $(this).next("div.Content").show("fast"); 
                    $(this).("div.ArrowExpand").attr("class", "ArrowClose"); 
                }, 
                function() {                    
                    $(this).next("div.Content").hide("fast"); 
                    $(this).("div.ArrowClose").attr("class", "ArrowExpand"); 
                }); 
				
            });    
        </script>

Open in new window

Panos

ASKER

Hi hielo.
Did you make any changes?

hielo

I clearly pasted the wrong code. Try:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<style> 
/*CollapsiblePanel*/ 
.ContainerPanel 
{ 
       width:400px; 
       border:1px; 
       border-color:#1052a0;      
       border-style:double double double double; 
} 
.collapsePanelHeader 
{ 
       width:400px; 
       height:30px; 
       background-image: url(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/images/bg-menu-main.png); 
       background-repeat:repeat-x; 
       color:#FFF; 
       font-weight:bold; 
} 
.HeaderContent 
{ 
       float:left; 
       padding-left:5px; 
} 
.Content 
{ 
       
} 
.ArrowExpand 
{ 
       background-image: url(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/images/expand_blue.jpg);
       width:13px; 
       height:13px; 
       float:right; 
       margin-top:7px; 
       margin-right:5px; 
} 
.ArrowExpand:hover 
{ 
       cursor:hand; 
} 
.ArrowClose 
{ 
       background-image: url(http://www.asp.net/AJAX/AjaxControlToolkit/Samples/images/collapse_blue.jpg); 
       width:13px; 
       height:13px; 
       float:right; 
       margin-top:7px; 
       margin-right:5px; 
} 
.ArrowClose:hover 
{ 
       cursor:hand; 
} 
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
       <script language="javascript"> 
            $(document).ready(function() { 
                $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").toggle( 
                function() {
				$(this).prev().html( $(this).prev().html().replace("(Show","(Hide") )
                    $(this).parent().next("div.Content").show("slow"); 
                    $(this).attr("class", "ArrowClose"); 
                }, 
                function() {                   
				$(this).prev().html( $(this).prev().html().replace("(Hide","(Show") ) 
                    $(this).parent().next("div.Content").hide("slow"); 
                    $(this).attr("class", "ArrowExpand"); 
                });              
  
            });            
        </script>
</head> 
<body>
<div id="ContainerPanel" class="ContainerPanel">
	<div id="header" class="collapsePanelHeader"> 
		<div id="dvHeaderText" class="HeaderContent">jQuery Collapsible Panel1 (Show Details...)</div> 
		<div id="dvArrow" class="ArrowExpand"></div> 
	</div> 
	<div id="dvContent" class="Content" style="display:none"> 
		/*Content*/ 
	</div> 
</div> 
   <div id="Div1" class="ContainerPanel"> 
        	<div id="Div2" class="collapsePanelHeader"> 
        		<div id="Div11" class="HeaderContent">jQuery Collapsible Panel2 (Show Details...)</div> 
            	<div id="Div3" class="ArrowExpand"></div> 
        	</div> 
        	<div class="Content" style="display:none"> 
            /*Content*/ 
        	</div> 
   </div>   
   <div id="Div4" class="ContainerPanel"> 
        <div id="Div5" class="collapsePanelHeader"> 
             <div id="Div12" class="HeaderContent">jQuery Collapsible Panel3 (Show Details...)</div> 
            <div id="Div6" class="ArrowExpand"></div> 
        </div> 
        <div class="Content" style="display:none"> 
           /*Content*/ 
        </div> 
    </div>     
    <div id="Div7" class="ContainerPanel"> 
        <div id="Div8" class="collapsePanelHeader"> 
             <div id="Div13" class="HeaderContent">jQuery Collapsible Panel4 (Show Details...)</div> 
            <div id="Div9" class="ArrowExpand"></div> 
        </div> 
        <div id="Div10" class="Content" style="display:none"> 
           /*Content*/ 
        </div> 
      </div>
</body>
</html>

Open in new window

Panos

ASKER

Hielo this is working almost like in the example clicking on the arrow.
I want to click on the div "collapsePanelHeader" and have the toggle function and the arrowclass changes.

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Thank you hielo.
It is working perfect.
Can you please take a look on another collapsible panel problem with jquery.cookie?
https://www.experts-exchange.com/questions/24875041/jquery-collapsible-panel-and-jquery-cookie.html

regards
panos