Stone Coast Web Design Blog

Navigation

Search

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

| |

E-mail

Total Posts: 405
This Year: 33
This Month: 14
This Week: 0
Comments: 17

Wednesday, March 10, 2010

jQuery Collapsible Panel

Wednesday, March 10, 2010 9:21:03 PM (GMT Standard Time, UTC+00:00) ( jQuery )

<!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:25px; 
       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;
       font-family:Arial, Helvetica, sans-serif;
       font-size: small;
} 
.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;
       margin-bottom: 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;
       margin-bottom: 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 ").toggle( 
                function() {
                $(this).html( $(this).html().replace("(Show","(Hide") )
                    $(this).next("div.Content").show("slow");
                    $("DIV.ArrowExpand",this).attr("class", "ArrowClose");
                },
                function() {                   
                $(this).html( $(this).html().replace("(Hide","(Show") )
                    $(this).next("div.Content").hide("slow");
                    $("DIV.ArrowClose",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> 
   
</body>
</html>

Comments [0] | |

Comments are closed.

Mostly .NET Development

Navigation

Search

Categories

On this page

Archive

Blogroll