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:

  <script src="jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(document).ready(function($) {
                 return false;

<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.

  <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><!-- colophon -->


View Demo

Tagged as jquery
Written by Andrew Konkol on March 11th, 2011


Log in with Twitter, Google, Facebook, LinkedIn to leave a comment.