Tuesday's Tips -Expandable/Collapsible Toggle Menu

Brooke, here is the requested tutorial! I learned how to do this by Olivia's tutorial over at Robin Blogs. Unfortunately she took her tutorial down, but she did give me permission to write my own tutorial.
I do have to warn you all that this is one of those more advanced tutorials, that will take a lot of patience, time, and trial & error. =) That said, let's get to it!
If you'd like to take a look at what we'll be making turn your attention to the menu at the top of my sidebar. =)

1}

adding the script behind the code

First of all search for this little bit of code:

]]></b:skin> 

Right underneath that copy/paste this:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://photographybyemilygrace.bracehost.com/accordionButton.js' type='text/javascript'></script>

This is what makes the toggle menu work.  =)  So if you mess this part up, the whole thing won't work. But if you just copy/paste it should work just fine.  (one note, it took some time for mine to start working, so don't panic if the menu doesn't work right after you install it)

now for the creative part...

2}

adding the code behind the menu

This is what controls what the menu looks like.
First of all search for this little bit of code(again):

]]></b:skin> 

Right above that copy/paste one of these codes (I'm giving you a few examples to show you how you can change the design--please feel free to tweak it however you'd like, infact I encourage you to make it as much 'yours' as possible):

.accordionButton {
width: 250px;
height: 25px;
float: left;
background: #EEF0F1;
background-image:url(//70.38.54.187/h/404/d4d8c700-2855-485e-94a0-5de81b9f1329.jpg);
background-position: 0% 0%;
background-attachment:fixed;
border: 1px solid #999;
margin-top: 1.5px;
margin-bottom: 1.5px;
padding-top: 3px;
cursor: pointer;
color: #666;
font-family:"century gothic", verdana, arial, sans-serif;
font-size:20px;
text-transform:none;
letter-spacing: 0px;
}
.accordionContent {
width: 250px;
float: left;
display: none;
font-family:"Century Gothic";
font-style: none;
font-size: 12px;
letter-spacing: 1px;
text-transform:none;
letter-spacing: 0px;
margin-bottom:3px;
}

.accordionButton {
width: 250px;
height: 25px;
float: left;
background: #d94b51;
border: 1px solid #999;
margin-top: 1.5px;
padding-top: 3px;
cursor: pointer;
color: #fff;
font-family:"century gothic", verdana, arial, sans-serif;
font-size:20px;
text-transform:uppercase;
letter-spacing: 0px;
}
.accordionContent {
width: 250px;
float: center;
border: 1px solid #999;
display: none;
font-family:"Century Gothic";
font-style: none;
font-size: 12px;
letter-spacing: 1px;
text-transform:none;
letter-spacing: 0px;
margin-bottom:3px;
}

.accordionButton {
width: 200px;
height: 25px;
float: center;
background: #FFFFFF;
border-bottom: 0px solid #a6ba7c;
cursor: pointer;
color: #a6ba7c;
font-size:14px;
text-align: center;
text-transform:none;
letter-spacing:4px;
}
.accordionContent {
width: 200px;
float: center;
display: none;
font-size:12px;
text-align: left;
letter-spacing: 1px;
border:1px solid #a6ba7c;
}

3}

adding the menu

Add a new HTML/Javascript widget and paste this into it:

<div class="accordionButton">

TITLE

</div>
<div class="accordionContent">

CONTENT

</div>

Replace TITLE with your title and CONTENT with your content, respectively.
Copy and paste that code as many times as you need for however many buttons you want your menu to have.

Extra Tip
If you'd like to make one of your buttons link to a page instead of a drop-down follow this example:

<a href="http://emilygrace-blog.blogspot.com"><div class="accordionButton">Home</div></a>

Ta-da! You did it! =D
If you have any questions, feel free to let me know and I'll get back asap.

In Christ,