Функция «Увидеть больше/увидеть меньше» для нескольких абзацев/текстового содержимого на веб-сайте — HTML, CSS и Javascript

Функция See More реализована с использованием высоты текстового абзаца, scrollHeight и clientHeight. Функция «Увидеть больше» автоматически отключается, если высота прокрутки текстового содержимого меньше минимальной видимой высоты текстового содержимого. Функция включается автоматически, если высота текстового содержимого scrollHeight превысила видимую высоту текстового содержимого при загрузке страницы.

ПРИМЕР Функция «Увидеть больше/увидеть меньше»:

Пример:

---

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem.

Увидеть больше

HTML КОД:

<div class="card-container">

    <div class="card">

      <div class="card-img">

        <a href="https://vebkod.blogspot.com/2023/06/css-html-javascript.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBTDVp0ZLge_U3nYXQz9Vv_MyXJRGHSny8AYbBz33f7WSHgdHxoqky9rCYxfTgTS8T0j2DVXobOUmQHWtbIMbqZVhnrTIH7QH3AfntmjwexnYd8UCGFREAMCTF2t83bdtMBmcA9bzVTTKGP4uPgY_t6duR9YlJUudYeDlgiyrpS14qKJJ0iPxGAR42bU/s1280/thumbnailnew%202020-10-30.png" alt=""></a>

      </div>

      <div class="card-content">

        <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem.</p>

        <span class="see-more-btn">See More</span>

      </div>

    </div>

 <div class="card">

      <div class="card-img">

        <a href="https://vebkod.blogspot.com/2023/06/css-html-javascript.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBTDVp0ZLge_U3nYXQz9Vv_MyXJRGHSny8AYbBz33f7WSHgdHxoqky9rCYxfTgTS8T0j2DVXobOUmQHWtbIMbqZVhnrTIH7QH3AfntmjwexnYd8UCGFREAMCTF2t83bdtMBmcA9bzVTTKGP4uPgY_t6duR9YlJUudYeDlgiyrpS14qKJJ0iPxGAR42bU/s1280/thumbnailnew%202020-10-30.png" alt=""></a>

      </div>

      <div class="card-content">

        <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem.</p>

        <span class="see-more-btn">See More</span>

      </div>

    </div>

      <div class="card">

      <div class="card-img">

        <a href="https://vebkod.blogspot.com/2023/06/css-html-javascript.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBTDVp0ZLge_U3nYXQz9Vv_MyXJRGHSny8AYbBz33f7WSHgdHxoqky9rCYxfTgTS8T0j2DVXobOUmQHWtbIMbqZVhnrTIH7QH3AfntmjwexnYd8UCGFREAMCTF2t83bdtMBmcA9bzVTTKGP4uPgY_t6duR9YlJUudYeDlgiyrpS14qKJJ0iPxGAR42bU/s1280/thumbnailnew%202020-10-30.png" alt=""></a>

      </div>

      <div class="card-content">

        <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis perspiciatis architecto laudantium ducimus placeat excepturi rerum harum doloribus obcaecati corporis eum error omnis asperiores iure est aliquid, blanditiis autem.</p>

        <span class="see-more-btn">See More</span>

      </div>

    </div>

  </div>

CSS КОД:

/*======= Card Css =======*/

.card-container{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

    margin: 30px;

}

.card{

    position: relative;

    background: #fff;

    width: 350px;

    box-shadow: 0 5px 25px rgba(2, 2, 2, 0.25);

    border-radius: 10px;

    overflow: hidden;

}

.card .card-img{

    position: relative;

    width: 350px;

    height: 200px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.card .card-img img{

    width: 102%;

    height: 102%;

}

.card-content{

    position: relative;

    text-align: center;

    margin: 15px;

}

.card-content .text{

    position: relative;

    font-size: .9em;

    text-align: left;

    height: 100px;

    overflow: hidden;

    transition: height 0.3s ease;

}

.card-content .text:before{

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, #fff, transparent);

    display: none;

}

.card.gradient .card-content .text:before{

    display: block;

}

.card-content .see-more-btn{

    font-size: .85em;

    color: #777;

    user-select: none;

    cursor: pointer;

    transition: color 0.3s ease;

}

.card-content .see-more-btn:hover{

    color: #111;

}

/*======= Media queries (max-width: 450px) =======*/

@media screen and (max-width: 450px){

    .card-container {

        margin: 15px;

    }

    .card {

        width: 100%;

    }

    .card .card-img {

        width: 100%;

        max-width: 800px;

        height: auto;

    }

}  

JAVASCRIPT  КОД:

<script>  

const cards = document.querySelectorAll(".card");

//Отключите функцию просмотра большего количества текстового содержимого, если высота меньше минимальной видимой высоты текстового содержимого при загрузке страницы.

window.onload = function(){

    cards.forEach((card) => {

        let seeMoreBtn = card.querySelector(".see-more-btn");

        let textContent = card.querySelector(".card-content .text");

        if(textContent.scrollHeight == textContent.clientHeight){

            seeMoreBtn.style.display = "none";

            textContent.style.height = "fit-content";

        }

        else{

            card.classList.add("gradient");

        }

    });

}

//См. больше функций, нажав кнопку «См. больше» на каждой карточке

cards.forEach((card) => {

    let seeMoreBtn = card.querySelector(".see-more-btn");

    let textContent = card.querySelector(".card-content .text");

    seeMoreBtn.addEventListener("click", () => {

        card.classList.toggle("active");

        card.classList.toggle("gradient");

        if(card.classList.contains("active")){

            seeMoreBtn.innerHTML = "See Less";

            textContent.style.height = textContent.scrollHeight + "px";

        }

        else{

            seeMoreBtn.innerHTML = "See More";

            textContent.style.height = "100px";

        }

    });

});  

</script>