Rediculously Easy Jquery Accordion
We wanted to write a small "about us" blurb on the website without having to create a whole page. This content would probably be less than 3 paragraphs, but it's an important 3 paragraphs. I figured out a way to "slide" a div section up over the main content. Jquery makes this super easy, here is a demoand if you want to make some elements a bit "shinier" here is the code:
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('#content').hide();
$('#about_section').click(function(){
$('#main_content').slideToggle();
$(this).parent().next().slideDown();
$('#content').toggle();
return false;
});
});
</script>
</head>
<body style="width:600px; ">
<div id="main_content">
<h1>Mary Had a Little Lamb</h1>
<p>Mary had a little lamb,
little lamb, little lamb,
Mary had a little lamb,
whose fleece was white as snow.
And everywhere that Mary went,
Mary went, Mary went,
and everywhere that Mary went,
the lamb was sure to go.
</p>
</div>
<div id="about_section" style="background-color:#E7E7DA; border-top:thick solid #000;">
<b><a href="#">About this story</a></b>
<div id="content">
<p>"Mary Had a Little Lamb" is an English language nursery rhyme of nineteenth-century American origin. </p>
</div>
</div><!-- colophon -->
</body>
</html>
0 Comments
Log in with Twitter, Google, Facebook, LinkedIn to leave a comment.