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

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

Видеоурок по слайдеру изображений в HTML CSS и JavaScript

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

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 КОД:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See MoreSee Less Function For Multiple Text Contents On A Website - HTML, CSS &
Javascript</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-container">
<div class="card">
<div class="card-img">
<img src="images/img1.jpg" alt="">
</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">
<img src="images/img2.jpg" alt="">
</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">
<img src="images/img3.jpg" alt="">
</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>
<script src="main.js"></script>
</body>
</html>

CSS КОД:

/*======= Google fonts =======*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*======= Main Css =======*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/*======= 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 КОД:

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";
}
});
});

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

Отправить комментарий

نموذج الاتصال