Menú vertical desplegable con jQuery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_container&quot;).hide();
$(&quot;h2.togglemenu&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
return false;
});
});
</script>

Ahora antes de ]]></b:skin> pega lo siguiente:

h2.togglemenu {
padding: 0 0 0 30px;
margin: 0 0 5px 0;
background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"
border: 1px solid #2E2E2E;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
height: 45px;
line-height: 45px;
width: 350px; /* Ancho de la pestaña */
text-transform:none !important;
font-size: 2em;
font-weight: 900;
font-family: Florence, cursive; /* Tipo de letra */
float:left;
}
h2.togglemenu a {
padding-left:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrCw9d2Tgxpvk_bleoQfnxA307iSuwfpHg5MN0ioA__LoMJa7_6yC2WAxYO0Rez5PuztiPgCr4mG0XKt-If3YqYbQhBC6PeL1dFKI-ph6Hn3ynIuhG3ApVDUnFsf4XAKb44kI3Gwdz7x0g/)no-repeat left center;
color: #fff; /* Color de los títulos */
text-decoration: none;
display: block;
}
h2.togglemenu a:hover {color: #ccc;} /* Color del título al pasar el cursor */
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border: 1px solid #d6d6d6;
background: #f0f0f0; /* Color del contenedor */
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
overflow: hidden;
font-size: 1.2em;
width: 380px; /* Ancho del contenedor */
clear: both;
}
.toggle_container .block {
padding: 20px;
}

Y por último en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript agrega esto:

<h2 class="togglemenu">
<a href="#">Pestaña 1</a></h2>
<div class="toggle_container">
<!-- Aquí va el contenido -->
<!-- Aquí va el contenido -->
</div>
</div>


<h2 class="togglemenu">
<a href="#">Pestaña 2</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>


<h2 class="togglemenu">
<a href="#">Pestaña 3</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>

Ya sólo agrega el contenido que pondrás en tu menú donde se indica en color rojo. Todo lo que agregues ahí es lo que estará oculto y que se mostrará al expandir el menú.
En color verde están las áreas que podemos personalizar. En el caso del color de fondo de las pestañas se cambian en esta parte:

background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"

Es un color de fondo gradiente, el #AAAAAA es el color de arriba y el #000000 es el color de abajo.

Si quisieras agregar otra pestaña sólo añade otro código como este:

<h2 class="togglemenu">
<a href="#">Pestaña 4</a></h2>
<div class="toggle_container">
<div class="block">
<!-- Aquí va el contenido -->
</div>
</div>