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>