Accordion Menu 1

A simple accordion for storing content

by Colin Soderstrom

HTML

<div id="firstpane" class="menu_list">
  <p class="menu_head">Header 1</p>
    <div class="menu_body">
    <div id="spacer"><img src="http://colinsoderstrom.com/images/CSLogo1.gif" width="64" height="76" alt="CS Logo" title="Colin Soderstrom Web Design" align="left" id="CSLogo" />
        <a href="#">Link-1</a>
        <a href="#">Link Example-2</a>
        <a href="https://www.google.com/" target="_blank">Google.com</a>
        </div>
    </div>
  <p class="menu_head">Example Header 2</p>
    <div class="menu_body">
        <a href="#">Random Link</a>
        <a href="#">Link Example-2.2</a>
        <a href="http://www.w3schools.com/">w3schools</a>
    </div>
  <p class="menu_head">Third Header</p>
    <div class="menu_body">
        <a href="#">Example Link</a>
        <a href="#">Link Two in Example Three</a>
        <a href="http://jsfiddle.net/">jsfiddle</a>
   </div>
</div>

CSS

#firstpane {
    margin: 20px;
}
.menu_list {
    width: 250px;
}
.menu_head {
    padding: 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    background-color: red;
    font-family: Arial;
    color: white;
}
.menu_body {
    display:none;
    margin-bottom: 10px;
}
.menu_body a {
  display:block;
  color:#0066FF;
  background-color:#FFFFFF;
  padding-left:10px;
  text-decoration:none;
  font-family: Tahoma, Geneva, sans-serif;
}
.menu_body a:hover {
  color: #0066FF;
  text-decoration:underline;
}
#spacer {
    height: 76px;
}
#CSLogo {
    margin: 0px 10px 0px 10px;
}

JavaScript

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});