Share Blog

Saturday, August 09, 2014

JQuery User Interface(UI) Accordion Example

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Thumbnail_Image.aspx.cs" Inherits="Thumbnail_Image" %>

<!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 runat="server">
    <title>jQuery UI Accordion Example</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type ="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type ="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">

    $(function () {
        $("#accordion").accordion({
            heightStyle: "fill"
        });
    });
</script>
<style type="text/css">
#accordion-resizer
{
width: 450px;
height: 220px;
font-size:10px;
font-family:Arial;
}
</style>
</head>
<body>
<div id="accordion-resizer">
<div id="accordion">
<h3>HOME</h3>
<div>
<p>Welcome to Aspdotnet.Sunil Kumar
   Welcome to Aspdotnet.Sunil Kumar
</p>
</div>
<h3>ABOUT</h3>
<div>
<p>This Blog offers Asp.net,C#.net,SQL Server,Web Services,WCF,WPF,MVC,
Crystal Reports,AJAX,JavaScript,JQuery,Gridview articles,code examples of asp.net.
</p>
</div>
<h3>CONTACT</h3>
<div>
<p>Welcome to Sunil Kumar
   Welcome to SUNIL Kumar
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>    </div>
<h3>ADVERTISE</h3>
<div>
<p>This blog gets updated considering the .net programmers including the newbies as well as the advance developers.
</p>
<p>This blog gets updated considering the .net programmers including the newbies as well as the advance developers.
</p>
</div>
</div>
</div>
</body>
</html>



No comments:

Post a Comment