Quiero mostrar 3 líneas de contenido dinámico que pueden incluir Encabezado, Párrafo o espacio (sin cortar ningún contenido) y al hacer clic en el botón "Mostrar más" se mostrará todo el contenido interior. Aquí está el ejemplo del código: la altura fijada no es la solución aquí que estoy usando en este ejemplo. Por favor sugiera el mejor trabajo alrededor. Gracias
$('.show-btn').on('click', function(){ $('.show-less').css("max-height" , "initial"); }); .show-less { max-height: 110px; margin-bottom: 0px; overflow: hidden; font-size: 13px; line-height: 25px; transition: all 1s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="show-less" class="show-less"> <p>hi, this is a test description.</p> <h2>hi, this is a test description.</h2> <p>hi, this is a test description.</p> <p>hi, this is a test description.</p> <h2>hi, this is a test description.</h2> </div> <a href="javascript:void(0)" class="show-btn">Show More</a>quisiste decir algo como esto?
html:
<div class="box"> <h2>hi, this is a test description.</h2> <p>hi, this is a test description.</p> <p>hi, this is a test description.</p> <p>hi, this is a test description.</p> <h2>hi, this is a test description.</h2> </div> <a href="javascript:void(0)" class="show-btn">Show More/Less</a>CSS:
.box { max-height: 8rem; margin-bottom: 0; overflow: hidden; font-size: 13px !important; line-height: 25px !important; font-family: "Poppins", sans-serif; transition: all 1s; clear: both; } .box--more-mode { max-height: initial; }JS:
$(".show-btn").on("click", function () { $(".box").toggleClass("box--more-mode"); });