2

Necesito crear una tarjeta que contenga un link "More" que al clickear en dicho link la tarjeta se expanda hacia arriba para mostrar más texto.

  • La expansión hacia arriba debería ser una animación que mantenga el borde inferior de la tarjeta fijo.
  • Alternable, es decir que si se vuelve a clickear en el mismo link (estando la tarjeta expandida) ésta debería contraerse.
  • El texto del link debería cambiar, si la tarjeta está contraída deber decir "More" y si está expandida decir "Less".

El efecto .slideUp() de JQuery no me serviría porque cierra la animación hacia arriba (la parte inferior de la tarjeta no queda fija).

$(document).ready(function() {
  $("#link").click(function() {
    $(this).text() === "MORE" ? $(this).text("LESS") : $(this).text("MORE")
    $("#card").animate({
      bottom: 0,
      top: "48px",
      height: "100px",
    })
    $("#text").fadeIn("slow")
  })
})
#card {
  background-color: lightblue;
  width: 500px;
  position: absolute;
}

#text {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div id="card">
    Card
    <br>
    <p id="text">Blah, blah, blah...</p>
    <a href="#" id="link">MORE</a>
  </div>
</div>

https://jsfiddle.net/7jgso565/3/

3
  • 1
    puedes agregar el codigo que haz hecho Commented el 5 oct. 2017 a las 14:57
  • ¿Te refieres a que al expandirse y estar el borde inferior fijo, crezca de tamaño la tarjeta? Si es así, creo que la mejor manera de hacerlo es con clases y css.
    – asantana o
    Commented el 5 oct. 2017 a las 16:55
  • Si, podría usar .toggleClass() de JQuery para alternar entre dos clases de tarjeta (una expandida y una contraída) pero el cambio entre ambas sería instantáneo, yo nocesito que se reproduzca una animación que agranda o achica la tarjeta. Pero sin que se mueva la parte inferior de la tarjeta, es decir, se estira para arriba y se contrae desde arriba. Commented el 5 oct. 2017 a las 22:01

1 respuesta 1

1

Una solución es jugar con las posiciones relativas y absolutas de los elementos. Puedes posicionar la tarjeta con posición absoluta dentro de un elemento contenedor (con posición relativa) y fijarla en la parte baja, así cuando cambies la altura se desplazará dentro del contenedor. De igual manera el link para que no se desplace.

Para la animación puedes alternar entre dos clases (contraída y expandida) y usar la propiedad de css transition que anima la transición entre los cambios que haces https://developer.mozilla.org/es/docs/Web/CSS/transition

Y para la alternancia puedes simplemente declarar una variable global lógica, evaluarla con un condicional y según el estado alternar entre true y false.

Podría ser algo así:

$tar=$('.tarjeta');
$a=$('.btn');
$p=$('.msg');
var isHidden=true;

$a.click(function(){
  if(isHidden){
    $tar.removeClass().addClass('tarjeta not-hidden');
    $a.html('Less');
    $p.css('display','inherit');
    isHidden=false;
  } else {
    $tar.removeClass().addClass('tarjeta is-hidden');
    $a.html('More');
    $p.css('display','none');
    isHidden=true;
  }
});
.contenedor {
  height:150px;
  position:relative;
}

.tarjeta {
  width:200px;
  background:lightblue;
  position:absolute;
  bottom:0;
}
 
.btn { 
  position:absolute;
  bottom:10px;
  text-align:center;
  width:100%;
}

.is-hidden {
  height:50px;
  transition: height 1s ease-in-out;
}

.not-hidden {
  height:150px;
  transition: height 1s ease-in-out;
}

.msg {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor">
  <div class="tarjeta is-hidden">
    <p class="msg">Blah blah blah</p>
    <a href="#" class="btn">More</a>
  </div>
</div>

Te dejo también el enlace de los diferentes efectos que puedes utilizar en la propiedad transition https://developer.mozilla.org/es/docs/Web/CSS/transition-timing-function

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.