I didn’t like what I saw, when I went looking… so I kinda made my own.
$(document).ready(function()
{
// activete the first item
$(".accordion .query:#news").animate({height: 470}, 750);
// drop the active text
$(".accordion .query:#news").find(".activate").animate({opacity: "0", top: 450},760);
$(".accordion .query").click( function()
{
// grow!
$(this).animate({height: 470}, 750);
//
$(this).find(".activate").animate({opacity: "0", top: 450},760);
// this is how I will set the id of the expanded swf
var a = $(this).attr('id');
//alert( a ) ;
// truncate the non active bastards
$(this).siblings(".query").animate({height: 150}, 750);
//
$(this).siblings(".query").find(".activate").animate({opacity: "1",top: 130},760);
});
});
<html>
<head>
<!-- load the jquery script -->
<script src="http://jquery.com/src/jquery.js"></script>
<script src="js/Accordion.js" type="text/javascript">
<!-- this is the code from above-->
</script>
<!-- CSS -->
<style type="text/css">
<!--
@import url("css/style.css");
.accordion {
width: 980px;
border-bottom: solid 1px #c4c4c4;
}
.accordion .query {
background: #e9e7e7;
padding: 0;
margin: 0;
font: bold Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
height: 150px;
overflow: hidden;
}
.accordion .query:hover {
background-color: #e3e2e2;
}
.accordion .query.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
color: #333333;
font-size: 11px;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion h1 {
margin-left: 10px;
color: #111111;
font-size: 12px;
font-weight: normal;
}
.accordion a:link {
color: #FF9900;
}
.accordion a:visited {
color: #FF9900;
}
.accordion .activate {
color: #333333;
background: #f7f7f7;
border: solid 1px #c4c4c4;
font-size: 11px;
text-align: center;
position: relative;
top: 130px;
left: 820px;
width: 120px;
display: block;
}
-->
</style>
<!-- Title=-->
<title>Dr.Punchman is Awesome</title>
</head>
<body>
<div class="accordion">
<div class="query" id="unigueID1">
<div class="activate">Click To Expand</div>
<h1>Title 1</h1>
<p>Lorem ipsum</p>
</div>
<div class="query" id="unigueID2">
<div class="activate">Click To Expand</div>
<h1>Title 2</h1>
<p>Lorem ipsum</p>
</div>
<div class="query" id="unigueID3">
<div class="activate">Click To Expand</div>
<h1>Title 3</h1>
<p>Lorem ipsum</p>
</div>
</div>
</body>
</html>
Post a Comment