Как сделать анимацию плавного раскрытия блока?

Frontend developer JavaScript
1

Всем привет, у меня есть блок с короткой информацией, и этот блок можно расширить, и он нормально расширяется, только одна проблемка, не могу понять как тут можно сделать анимацию плавного раскрытия продолжения контента, как бы есть большой текст, его ужимают, но есть кнопка еще которая выводит всё содержимое, так вот нужно сделать как то что бы выводило оно плавно продолжение, буду благодарен любым вариантам как это осуществить.

2

Как то вот так:

<div class="tabs-content tabs-content-one">

    <div height="2000px" class="tabs-content-one-content tab-content details-tabs-deacription" >

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo atque incidunt quis labore laboriosam aliquam numquam minima iusto reiciendis adipisci esse vel pariatur commodi unde mollitia ipsum rem, voluptas magni, deserunt iure odit voluptate. Quos aspernatur eius accusamus doloremque eos odio, provident sapiente itaque, tempora nemo iusto libero, omnis enim, suscipit minima dolor temporibus voluptate esse rem at molestias rerum sit! Voluptatibus enim maxime ipsum consectetur itaque fugiat natus excepturi culpa illo inventore placeat rerum suscipit porro reiciendis, deserunt! Itaque cum doloremque quod maiores dolorum obcaecati repellendus, harum sit fuga ab perferendis ipsum qui, aliquid praesentium tempore eveniet porro quia placeat voluptates provident sunt, corrupti expedita! Illo, quaerat reprehenderit nemo officiis iure quo corporis, accusamus possimus tempore perferendis temporibus pariatur cum est laboriosam natus repellat omnis eligendi! Voluptas voluptatum ab, ea inventore nesciunt itaque, eius, perspiciatis, reprehenderit repellat non aperiam est quisquam! Accusantium voluptatibus quos in consequuntur laborum dolores voluptatum, minus alias tenetur amet, enim maiores dolorum. Minima rem dolore ipsum, explicabo nesciunt necessitatibus autem fugiat quas molestias sit nostrum laudantium corrupti sint sequi earum debitis odio at, reiciendis harum repellat velit voluptates dolores labore ullam. Fugit aspernatur magnam maxime harum magni vitae debitis, officiis dolorem doloremque, pariatur, placeat fuga!

        <div class="open-hidden-text">

            <a class="open-tab" href="#">

В html коде прописываем блок который содержит основной текст, и ссылку для открытия всего текста в отдельном блоке.

$(".details-tabs-deacription .open-tab").on("click", function(e){

    let $link = $(this),

        $box = $link.$box || $(this).parents(".details-tabs-deacription:eq(0)");

    $link.$box = $box;

    $box.toggleClass("_open");

});

В js ссылке присваиваем текущий объект, и прикрепляем продолжение текста, вместе с классом open.

.details-tabs-deacription {

    max-height: 100px;

    overflow-y: hidden;

    transition: height, max-height 2s ease 0s;

    position: relative;

    z-index: 0;

}

.details-tabs-deacription._open {

    max-height: 1000px;

}

.details-tabs-deacription .open-hidden-text {

    position: absolute;

    left: 0;

    bottom: 0;

    background-color: #fff;

}



.details-tabs-deacription .open-tab:before {

    content: "show";

}

.details-tabs-deacription._open .open-tab:before {

    content: "hide";

}