Skip to content

Instantly share code, notes, and snippets.

@jonahlyn

jonahlyn/gist:430954

Created June 9, 2010 02:23
Show Gist options
  • Save jonahlyn/430954 to your computer and use it in GitHub Desktop.
Save jonahlyn/430954 to your computer and use it in GitHub Desktop.
Download ZIP
A custom accordian. http://jsbin.com/gist/430954
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Accordion</title>
<style type="text/css">
html, body, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, label, table, th, td { margin: 0; padding: 0; }
h1 { font-size: 24px; line-height: 30px; margin-bottom: 18px; }
h2 { font-size: 20px; line-height: 26px; margin-bottom: 18px; }
h3 { font-size: 13px; line-height: 13px; }
.container {
background: #fff;
color: #333; font: 12px/18px Verdana, Helvetica, sans-serif;
margin: 10px;
width: 400px;
}
ul#accordion {
border-bottom: 1px solid #000E2E;
clear: both;
float: none;
line-height: 12px;
margin: 0;
padding: 10px 0 0 0;
}
ul#accordion, ul#accordion ul { list-style: none; margin: 0; }
ul#accordion li {
border-left: 1px solid #000E2E;
border-top: 1px solid #000E2E;
border-right: 1px solid #000E2E;
}
ul#accordion ul li {
border: 0 none;
border-bottom: 1px solid #C2C8D1;
color: #666;
padding: 5px 15px;
}
ul#accordion ul li:last-child { border-bottom: none; }
ul#accordion h3 a {
background: #DFCAB5;
color: #333;
display: block;
padding: 5px;
text-decoration: none;
}
ul#accordion h3 a:hover {
background: #CC6600;
color: #fff;
}
ul#accordion li ul .label {
display: inline-block;
font-weight: bold;
padding-right: 10px;
width: 125px;
}
ul#accordion li.current h3 a {
background: #CC0000;
color: #fff;
}
form {
overflow: hidden;
padding: 2px;
}
form p {
display: inline;
margin: 0;
padding: 0 3px 0 0;
position: relative;
text-align: left;
}
form label {
color: #666;
font-weight: bold;
}
form input {
border: 1px solid #999;
font-size: inherit;
line-height: inherit;
margin: 0;
padding: 3px;
}
form input#submit {
background: #DFCAB5;
padding: 2px;
}
form.jsenabled p {
float: left;
padding: 0 5px 0 0;
}
form.jsenabled label {
position: absolute;
left: 5px;
top: 2px;
}
form.jsenabled input.selected {
outline: 2px solid #CC0000;
-moz-outline-radius-bottomleft: 4px;
-moz-outline-radius-bottomright: 4px;
-moz-outline-radius-topleft: 4px;
-moz-outline-radius-topright: 4px;
}
</style>
<!--[if IE]>
<style type="text/css">
ul#accordion { float: left; width: 400px; }
ul#accordion li { float: left; width: 398px; }
ul#accordion a.heading { width: 398px; }
ul#accordion ul li { float: none; width: auto; }
</style>
<![endif]-->
</head>
<body>
<div class="container">
<h2>User Search</h2>
<form action="">
<p><label for="uid">User ID</label> <input type="text" name="uid" id="uid" /></p>
<p>or</p>
<p><label for="uname">User Name</label> <input type="text" name="uname" id="uname" /></p>
<p><input type="submit" value="submit" id="submit" /></p>
</form>
<ul id="accordion">
<li>
<h3><a href="#">User Information</a></h3>
<ul id="userinfo">
<li><span class="label">User ID:</span> XXXXXX</li>
<li><span class="label">Full Name:</span> Gilstrap, Jonahlyn D</li>
<li><span class="label">User Name:</span> jonahlyn </li>
</ul>
</li>
<li>
<h3><a href="#">History</a></h3>
<ul id="history">
<li><span class="label">Logged in</span> <span class="date">5/14/2007</span></li>
<li><span class="label">Logged out</span> <span class="date">5/14/2007</span></li>
<li><span class="label">Logged in</span> <span class="date">5/14/2007</span></li>
</ul>
</li>
<li>
<h3><a href="#">Roles</a></h3>
<ul id="menuaccess">
<li><span class="label">Student</span></li>
<li><span class="label">Employee</span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Raw
gistfile2.js
$(function(){
/**** ACCORDION ****/
$('ul#accordion li ul').toggle();
$('ul#accordion h3 a').click(function(){
$(this).css({'outline': 'none'});
if($(this).parent().parent().hasClass('current')){ //current
$(this).parent().siblings('ul').slideUp('normal', function(){
$(this).parent().removeClass('current');
});
}else { //not current
$('ul#accordion li.current ul').slideUp('normal',function(){
$(this).parent().removeClass('current');
});
$(this).parent().siblings('ul').slideToggle('normal',function(){
$(this).parent().toggleClass('current');
});
}
return false;
});
/**** FORM ****/
$('form').addClass('jsenabled');
$('input:text').each(function(){
$(this).attr({'value':''})
});
$('input:text').focus(function(){
$(this).addClass('selected');
if ($(this).val() == "") {
$(this).siblings('label').animate({'opacity': '0.4'}, 'fast');
}
else {
$(this).siblings('label').animate({'opacity': '0'}, 'fast');
}
});
$('input:text').blur(function(){
$(this).removeClass('selected');
if($(this).val() == ""){
$(this).siblings('label').animate({'opacity':'1'},'fast');
}
else {
$(this).siblings('label').animate({'opacity': '0'}, 'fast');
}
});
$('input:text').keypress(function(){
if ($(this).val() != "") {
$(this).siblings('label').animate({'opacity': '0'}, 'fast');
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment