<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AccordionMenu.WebForm2" %>
<!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></title>
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<STYLE>
body, input{
font-family: Calibri, Arial;
}
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion li{
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
</STYLE>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="accordion">
<li>Sports</li>
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Football</a></li>
</ul>
<li>Technology</li>
<ul>
<li><a href="#">iPhone</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
<li>Latest</li>
<ul>
<li><a href="#">Obama</a></li>
<li><a href="#">Iran Election</a></li>
<li><a href="#">Health Care</a></li>
</ul>
</ul>
</div>
</form>
</body>
<SCRIPT>
$("#accordion > li").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
</SCRIPT>
</html>
<!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></title>
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<STYLE>
body, input{
font-family: Calibri, Arial;
}
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion li{
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
</STYLE>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="accordion">
<li>Sports</li>
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Football</a></li>
</ul>
<li>Technology</li>
<ul>
<li><a href="#">iPhone</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
<li>Latest</li>
<ul>
<li><a href="#">Obama</a></li>
<li><a href="#">Iran Election</a></li>
<li><a href="#">Health Care</a></li>
</ul>
</ul>
</div>
</form>
</body>
<SCRIPT>
$("#accordion > li").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
</SCRIPT>
</html>
No comments:
Post a Comment