Dificuldade em exibir e ocultar Div

Em 2006 fiz minhas aulas referente a Web, mas como o interesse passou dois anos depois larguei pro lado, mas... agora que preciso novamente estou correndo atras do esquecido e esta bem mais dificil do que imaginei que fosse, especificamente no caso abaixo: Tenho um menu na horizontal com 8 "opções" uma ao lado da outra e quando clico em alguma das opções logo abaixo aparece a informação referente ao que foi selecionado, porém, o que mais quero nao estou conseguindo fazer, pra mim é aparentemente "simples" mas nao consigo fazer, exemplo: ao clicar na opção 1 a informação referente a essa opção aparece logo abaixo e quando eu clicar na opção 2 a informação aberta referente a opção 1 seja automaticamente ocultada e no lugar apareça as informações referente a opção 2 e assim sucessivamente, ou seja, so fique visivel a informação referente a opção selecionada, sem ter que alterar a posição horizontal em que se encontram as opção, nada mais nada menos. Os codigos abaixo estao como quero tanto em posicionamente como em visualização, exceto, o exibir e ocultar que nao esta como quero, coloquei nome de times, no codigo final vou colocar escudos no lugar dos nomes, e os escudos na horizontal um ao lado do outro dao uma melhor leitura da pagina quando as opções forem abertas.

<div id="times"> <div class="barcelona" style="display:none. ">
<p>barcelona - barcelona - barcelona</p>
</div> <div class="chelsea" style="display:none. ">
<p>chelsea - chelsea - chelsea</p>
</div> <div class="bmg" style="display:none. " >
<p>bmg - bmg - bmg</p>
</div> <div class="realmadrid" style="display:none. ">
<p>realmadrid - realmadrid - realmadrid </p>
</div> <div class="manchesterunited" style="display:none. ">
<p>manchester - manchester - manchester</p>
</div> <div class="juventus" style="display:none. ">
<p>juventus - juventus - juventus</p>
</div> <div class="bayernmunchen" style="display:none. ">
<p>bayern - bayern - bayern </p>
</div> <div class="intermilao" style="display:none. ">
<p>inter - inter - inter</p>
</div> </div> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[ jQuery.fn.toggleText = function(a,b) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a. })). } $(document).ready(function(){ $('.barcelona').before('<span><b>BARÇA</b></span>'). $('.chelsea').before('<span><b>CHELSEA</b></span>'). $('.bmg').before('<span><b>BMG</b></span>'). $('.realmadrid').before('<span><b>REAL</b></span>'). $('.manchesterunited').before('<span><b>UNITED</b></span>'). $('.juventus').before('<span><b>JUVE</b></span>'). $('.bayernmunchen').before('<span><b>BAYERN</b></span>'). $('.intermilao').before('<span><b>INTER</b></span>'). $('span', '#times').click(function() { $(this).next().slideToggle('slow') siblings('.barcelona:visible').slideToggle('fast'). siblings('.chelsea:visible').slideToggle('fast'). siblings('.bmg:visible').slideToggle('fast'). siblings('.realmadrid:visible').slideToggle('fast'). siblings('.manchesterunited:visible').slideToggle('fast'). siblings('.juventus:visible').slideToggle('fast'). siblings('.bayernmunchen:visible').slideToggle('fast'). siblings('.intermilao:visible').slideToggle('fast'). $(this).toggleText('Revelar','Esconder').siblings('span').next('.barcelona:visible').prev().siblings('span').next('.chelsea:visible').prev().siblings('span').next('.bmg:visible').prev().siblings('span').next('.realmadrid:visible').prev().siblings('span').next('.manchesterunited:visible').prev().siblings('span').next('.juventus:visible').prev().siblings('span').next('.bayernmunchen:visible').prev().siblings('span').next('.intermilao:visible').prev().toggleText('Revelar','Esconder') }). })
// ]]></script>

Encontrei esse topico http://forum.imasters.com.br/topic/403029-resolvidofazer-div-desaparecer-ao-clicar/ usei os codigos contidos no link acima e o exibir/ocultar ficaram como eu quero, porem, o menu ficou na vertical e com as informações aparecendo acima dele, achei esse metodo bem mais simples mas o posicionamento do menu e das informações referente a ele dificulta o objetivo "estetico" da pagina e nao conseguir deixar na vertical com as informaçoes aparecendo abaixo. Se houver sugestoes de um codigo menor ao que postei mas, com o formato de menu e resultado que preciso peço que indiquem.