Fazer menu expansível

Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens, etc... Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina de layot editar html e coloque isso antes dessa tag:



Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

 code fonte :

copie e cole em seu Blog ou Site.

|===Codgos.blogspot===| .CollapsiblePanel { padding: 3px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .CollapsiblePanelTab { margin: 0px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; } .CollapsiblePanelContent { padding: 5px; background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px; font-weight: normal; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; } .CollapsiblePanelTab a { color: black; text-decoration: none; } .CollapsiblePanelOpen .CollapsiblePanelTab { background-color: #FFCC99; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000;} .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover { text-decoration: underline; color: #0000FF;}

Então se for usar mais desses menus com conteúdo oculto, não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas é necessário fazer alguns ajustes.