slideToggle que se recoja cuando se expanda otro

[g3kdigital]

Es decir, algo más como en este pen: http://codepen.io/g3kdigital/pen/gPRbBJ iba a sugerirte usar el seudoselector :target con css, pero cuando de retrocompatibilidad se trata lo mejor es javascript.


Utilice esta estructura html donde los div, están separados de los enlaces.:

Código HTML:

<div class="enlaces">
  <a href="#" class="enlace focus1">  Caja 1  </a>
  <a href="#" class="enlace focus2">  Caja 2  </a>
  <a href="#" class="enlace focus3">  Caja 3  </a>
</div>
 
<div class="caja box1">
  <h4 class="titulo">contenido 1</h4>
  <p class="parrafo">Parrafo</p>
</div>
<div class="caja box2">
  <h4 class="titulo">contenido 2</h4>
  <p class="parrafo">Parrafo</p>
</div>
<div class="caja box3">
  <h4 class="titulo">contenido 3</h4>
  <p class="parrafo">Parrafo</p>
</div>
 

Luego tienes que ocultar el contenido con css y crear una clase ("aparece") que desoculte este contenido.

Código CSS:

.caja {
  overflow: hidden;
}
 
.parrafo {
  height: 1px;
  opacity: 0;
}
 
.parrafo.aparece {
  height: auto;
  opacity: 1;
}
 

Por ultimo, solo tienes que coger jQuery y creas una función que se active cuando no importa que enlace tenga el foco, todos las cajas oculten los elementos y otra función donde dependiendo del enlace clickeado des-oculte al div deseado:

Código Javascript:

$( ".enlace" ).focus(function() {
  $( ".parrafo" ).removeClass("aparece");
});
 
$( ".focus1" ).focus(function() {
  $( ".box1 .parrafo" ).addClass("aparece");
});
$( ".focus2" ).focus(function() {
  $( ".box2 .parrafo" ).addClass("aparece");
});
$( ".focus3" ).focus(function() {
  $( ".box3 .parrafo" ).addClass("aparece");
});
 

Hay maneras de optimizar más el código de manera que no sea necesario crean una función por cada enlace y div, pero mis conocimientos en jQuery son muy limitados.