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.

<script type="text/javascript">
$(document).ready(function(){
	$(".barcelona").hide();
	$(".chelsea").hide();
	$(".bmg").hide();

	$(".cidades").click(function(){
 var id = this.id;
 $('.'+id).slideToggle("fast");
 });
});
</script>

<div id="times">

<div class="cidades" id="barcelona">
<span>Barcelona</span>
<p class="barcelona">barcelona - barcelona - barcelona</p>
</div>
<br>

<div class="cidades" id="chelsea" >
<span>Chelsea</span>
<p class="chelsea">chelsea - chelsea - chelsea</p>
</div>
<br>
<div class="cidades" id="bmg">
<span>Bmg</span>
<p class="bmg">bmg - bmg - bmg</p>
</div>

</div>

<script type="text/javascript">
$(document).ready(function(){
	$(".barcelona").hide();
	$(".chelsea").hide();
	$(".bmg").hide();

	$(".cidades").click(function(){
 var id = this.id;
 $('.'+id).slideToggle("fast");
 });
});
</script>

<div id="times">

<div class="cidades" id="barcelona">
<span>Barcelona</span>
<p class="barcelona">barcelona - barcelona - barcelona</p>
</div>
<br>

<div class="cidades" id="chelsea" >
<span>Chelsea</span>
<p class="chelsea">chelsea - chelsea - chelsea</p>
</div>
<br>
<div class="cidades" id="bmg">
<span>Bmg</span>
<p class="bmg">bmg - bmg - bmg</p>
</div>

</div>

<p style="text-align: center;"><a style="cursor: pointer;" onclick="mostra('arsenal');">ARSENAL  </a>
<a style="cursor: pointer;" onclick="mostra('barcelona');">BARCELONA  </a>
<a style="cursor: pointer;" onclick="mostra('bmg');">BMG  </a>
<a style="cursor: pointer;" onclick="mostra('chelsea');">CHELSEA  </a>
<a style="cursor: pointer;" onclick="mostra('intermilao');">INTER DE MILÃO  </a>
<a style="cursor: pointer;" onclick="mostra('juventus');">JUVENTUS  </a>
<a style="cursor: pointer;" onclick="mostra('manchester');">MANCHESTER UNITED  </a>
<a style="cursor: pointer;" onclick="mostra('realmadrid');">REAL MADRID</a>  </p>
<center>
<div id="arsenal" style="display: none;"><b><i>ARSENAL - ARSENAL</i></b></div>
<div id="barcelona" style="display: none;"><b><i>BARCELONA - BARCELONA</i></b></div>
<div id="bmg" style="display: none;"><b><i>BMG - BMG</i></b></div>
<div id="chelsea" style="display: none;"><b><i>CHELSEA - CHELSEA</i></b></div>
<div id="intermilao" style="display: none;"><b><i>INTER DE MILÃO</i></b></div>
<div id="juventus" style="display: none;"><b><i>JUVENTUS - JUVENTUS</i></b></div>
<div id="manchester" style="display: none;"><b><i>MANCHESTER UNITED - MANCHESTER UNITED</i></b></div>
<div id="realmadrid" style="display: none;"><b><i>REAL MADRID - REAL MADRID</i></b></div>
</center>

<script type="text/javascript">// <![CDATA[
function mostra(theId){
var theArray= new Array('arsenal','barcelona','bmg','chelsea','intermilao','juventus','manchester','realmadrid');

 for(i=0; i<theArray.length; i++){
 if(theArray[i] == theId){
 w.style.display='block';
 }else{
 document.getElementById(theArray[i]).style.display='none';
 }
 }
 }

}
// ]]></script>