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>

View Demo

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

0 Comments

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