[SOLUCIONADO] slideToggle que se recoja cuando se expanda otro

[Vir4]

Buenas Amigos,

Tengo un código en el tengo varias cajas de texto que están ocultas y las muestro con slideTogle haciendo click en sus correspondientes a href. Funciona correctamente sólo que me gustaría que al expandir cualquiera de las cajas las otras, si están expandidas, se recojan.

El código es el siguiente:

$("#abre").click(function(event) {
event.preventDefault();
$("#caja1").slideToggle();
});

$("#caja1 a").click(function(event) {
event.preventDefault();
$("#caja1").slideUp();
});

//**********La segunda caja y sucesivas hasta 5 seguirían así ************/

$("#abre2").click(function(event) {
event.preventDefault();
$("#caja2").slideToggle();
});
$("#caja2 a").click(function(event) {
event.preventDefault();
$("#caja2").slideUp();
});

....
Muchas gracias por su ayuda

[infoturnosya]

podrias poner el html, xq creo q se puede mejorar en un solo click y que funcione para todas las cajas

[siddartha23]

Todas las cajas tienen que tener una misma clase y cuando le hagas el click al enlace para abrir, las buscas todas por esa clase y les haces un slideUp...

[Vir4]

Sí, mira, es muy simple por un lado tenemos los enlaces:

Código:

<a href="#" id="abre"> Hiperprolactinemia</a>
<a href="#" id="abre2">Efectos Metabólicos</a>
...

Y por otro las llamadas a los distintos div que muestran sus textos correspondientes:

Código:

<div id="caja1"> 
    <p>texto1....</p>.
  </div>

<div id="caja2"> 
      <p>texto2.....</p>
</div>
...

Para que te hagas una idea la maquetación está dispuesta de forma que tengo un contenedor con los diferentes enlaces y otro contenedor común en donde aparecen los distintos div ocultos con sus correspondientes textos.

Gracias de verdad, por la ayuda

[Vir4]

Por lo que te entiendo, no sería viable esa solución porque cada caja (div) tiene un contenido distinto a mostrar, que son llamadas desde sus correspondientes enlaces. Cada enlace referencia a un div en concreto y se muestra en un contenedor común donde van apareciendo unos u otros según el enlace que pulsemos.

Ahora mismo tal y como lo tengo aparece un div debajo del otro y si quiero ocultarlo hay que hacer click de nuevo en el enlace. Mi pretensión es que cuando uno aparezca los demás se oculten automáticamente si estuvieran ya desplegados. Una cosa así como el típico acordeón de jquery.

Gracias por tu interés

[g3kdigital]

Y así no te sirve? Solo haz clic en cada enlace:

http://codepen.io/g3kdigital/pen/eJWbNZ?editors=110

[siddartha23]

Iniciado por Vir4

Por lo que te entiendo, no sería viable esa solución porque cada caja (div) tiene un contenido distinto a mostrar, que son llamadas desde sus correspondientes enlaces. Cada enlace referencia a un div en concreto y se muestra en un contenedor común donde van apareciendo unos u otros según el enlace que pulsemos.

Ahora mismo tal y como lo tengo aparece un div debajo del otro y si quiero ocultarlo hay que hacer click de nuevo en el enlace. Mi pretensión es que cuando uno aparezca los demás se oculten automáticamente si estuvieran ya desplegados. Una cosa así como el típico acordeón de jquery.

Gracias por tu interés

Eso es lo mismo que entendí al principio, mira, cuando hagas click en un enlace primero cierra todas las cajas con la clase '.caja' que estén abiertas (siempre va ser solo una) y luego abres la caja que quieras abrir..

[Vir4]

Iniciado por siddartha23

Eso es lo mismo que entendí al principio, mira, cuando hagas click en un enlace primero cierra todas las cajas con la clase '.caja' que estén abiertas (siempre va ser solo una) y luego abres la caja que quieras abrir..

Muchas gracias,

Ahora entiendo lo que me indicas. Lo intento aplicando una clase "cierra" a las cajas como puedes ver en este pen:

[URL="http://codepen.io/virfour/pen/eJWqwG"]http://codepen.io/virfour/pen/eJWqwG[/URL]

Pero no sé donde cometo el error pero el caso que no me funciona

[Vir4]

No me serviría porque las cajas a expandir y recoger tienen que estar fuera del acordeon.

Por eso decía antes que la solución del acordeon en este caso no me sirve, además tiene que funcionar en IE7 e IE8 (pero bueno eso es historia aparte).

gracias!!

[siddartha23]

Iniciado por Vir4

Muchas gracias,

Ahora entiendo lo que me indicas. Lo intento aplicando una clase "cierra" a las cajas como puedes ver en este pen:

[URL="http://codepen.io/virfour/pen/eJWqwG"]http://codepen.io/virfour/pen/eJWqwG[/URL]

Pero no sé donde cometo el error pero el caso que no me funciona

La función que usaste para cerrar las cajas la estabas poniendo fuera del evento click del enlace por eso no funcionaba, he cambiado slideUp por hide para que el cambio de uno a otro se vea mejor, aún se puede mejorar más el resultado...

http://codepen.io/mvelarde/pen/OMgVMy

Muy aparte que sería mejor que crearas una función específica para esa acción para que no tengas mucho código repetido en tu js...

[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.

[Vir4]

¡Ahora sí!!!

El caso que hice varias pruebas pero que despiste dejarme fuera la función, pero creo que ya entraba en un bucle obsesivo de pesimismo.

Muchisimas gracias chicos por vuestra paciencia, soy unos cracks los que os pasáis por aquí prestando vuestro tiempo para ayudar el personal.

[Vir4]

Muchas Gracias amigo,

Sí, es otra forma viable que le da solución a mi cuestión. De verdad que encantado con vuestra ayuda