0

Buenas, estoy intentando hacer un desplegable pero no termina de funcionar, ahora mismo por mi código o se ve todo, o nada.

Posición inicial.

introducir la descripción de la imagen aquí

Posición final:

introducir la descripción de la imagen aquí

Y a mi lo que me gustaría, y no consigo, es que inicialmente se vea la primera fila (100px de alto) y que al darle a la flecha, se terminase de desplegar. Es decir, siempre tener la primera fila vísible.

Yo imagino que el error viene en mi JQuery, que no le defino las alturas, pero sinceramente no se donde, ni como ponerlo.

Adjunto mis códigos, espero hacerlo bien, si es excesivo disculpad, poco a poco voy intentando aprender a hacer mejores posts.

Código HTML de mi body:

    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>

    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>

    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>
    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>
    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>
    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>
    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>
    <div class="Contenedor_Individual">
        <img src="Img/Emoji.png" alt="">
    </div>

</div>

<div class="Contenedor_General_Icono_Deslizar">

        <img src="Img/AA_FlechaCirculo_Arriba.png" id="arrow-up" class="imgcolexp"/>
        <img src="Img/AA_FlechaCirculo_Abajo.png" id="arrow-down" class="imgcolexp"/>

</div>

Código CSS:

.Contenedor_General{ 
 height: 400px;
 width: 700px;
 background-color: red;

 margin: auto;
 margin-top: 50px;

 overflow: hidden;
 }

.Contenedor_Individual{
height: 100px;
width: 100px;
background-color: aqua;

float: left;
}

.Contenedor_General_Icono_Deslizar{
height: 20px;
width: 700px;
background-color: green;

margin: auto;
margin-top: 3px;
}

.imgcolexp{
height: 20px;
width:20px;

display: block;
margin: auto;
cursor:pointer;
}

Adjunto código JQuery:

$(document).ready(function(){
$("#arrow-up").css("display","none");              //Inicialmente está contraido, ocultamos la flecha de contraer.

$("#arrow-up,#arrow-down").click(function () {

$(".Contenedor_General").slideToggle("slow");           // Contrae/estira  Contenedor_General

if($("#arrow-up").css("display") == "block"){           // Comprueba que flecha es la que está visible
                                                        // entonces hace desaparecer esa y que aparezca la otra.
    $("#arrow-up").css("display","none");
    $("#arrow-down").css("display","block");
}
else
{
    $("#arrow-up").css("display","block");
    $("#arrow-down").css("display","none");
}
});
});

2 respuestas 2

0

Espero te sirva.

$("#button").click( function(){
	$("#dropdown").toggleClass("js");
	$("#icon").toggleClass("ion-chevron-up");
});
.dropdown {
  width: 100%;
}
.dropdown__content {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.dropdown__button {
  height: 40px;
  background: #f5f5f5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 24px;
  cursor: pointer;
}

.js .dropdown__content {
  height: 200px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />

<div class="dropdown" id="dropdown">
  <div class="dropdown__content">contenido</div>
  <div class="dropdown__button" id="button"><i class="ion-chevron-down" id="icon"></i></div>
</div>

1
  • Muchas gracias por contestar, pero eso (con mucho mejor código) es la que ya me hacía. Hice una solución alternativa, no es lo que yo quería, pero funciona.
    – Lleims
    Commented el 31 ago. 2017 a las 17:34
0

Al final MI solución (al menos hasta encontrar algo mejor), ha sido poner dos DIV, el primero siempre vísible y el segundo con la animación descrita en mi duda.

Hubiera preferido uno solo, pero no se como.

Lo comento por si alguien se ve con el mismo dilema, que así visualmente queda igual.

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.