FAQ: How to have a Collapsable Sidebar

Many fellow bloggers have asked this question and I have decided to write a post on how I did it.  I found it from a website you helped me, so I have found us Bloggers work together.  Here we go...

This is what you are creating:

**Everytime you click a title such as "donate" the menu will drop down and "contact me" will close**

First... Backup your blogger template.  This will help in case of emergency.  Sometimes I copy and paste the code into Word and leave it there.  Whatever you prefer.

Next... go to your HTML code and look for the following code: ]]></b:skin> (hit CTRL+F)

And paste the following code beneath it:

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

<script src='http://robinblogs.webs.com/javascript.js' type='text/javascript'> </script>

Now... Paste this code just above ]]></b:skin>

]#wrapper {

  width: 200px;

  margin-left: auto;

  margin-right: auto;

   }

.accordionButton { 

  width: 200px;

  height: 30px;

  float: left;

  background: #4d9081;

  border-bottom: 8px solid #FFFFFF;

  cursor: pointer;

  color: #ffffff;

  font-size:14px;

  text-align: center;

  text-transform:lowercase;

  letter-spacing:4px;

  }

.accordionContent { 

  width: 210px;

  float: left;

  display: none;

  font-size:14px;

  letter-spacing: 1px;

  border-bottom:8px solid #FFFFFF;

 }

It should have a structure like this:
Code 1
]]></b:skin>
Code 2

( #4d9081 Is the background color of the title.  You can go here to find the color you choose)

SAVE!

You will now need to Add an HTML/Javascript gadget in your layout.

Copy and paste this code in:

<center><div id="wrapper">

<div class="accordionButton">TITLE 1</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

<center><div id="wrapper">

<div class="accordionButton">TITLE 2</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

 

<center><div id="wrapper">

<div class="accordionButton">TITLE 3</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

 

Fill in your each title and text.  In order to add another item continue pasting this code in at the end:

 

<center><div id="wrapper">

<div class="accordionButton">TITLE 3</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

 SAVE!

Did it work?  If not please email me and I will be happy to help you!

Thanks

Taylor