Read More Read Less Using JavaScript | Full Responsive

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a read more read les Using HTML CSS and JavaScript. And with full responsive or full animation.

Video Tutorial Of Read More Read Less Using HTML, CSS & JS:

In the video, you have seen the demo of this and I hope you love it.

Source Code:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Read More And Less More Button Using JS</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="icon">
                <img src="img/img1.png" alt="">
            </div>
            <div class="content">
                <h3>Payment Form Using HTML & CSS</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorem doloribus, atque consectetur
                    incidunt et reprehenderit cum, aliquam eaque inventore maxime excepturi doloremque adipisci. Soluta,
                    saepe. Illo quasi nulla delectus?
                    Ipsa quasi cum, nesciunt vel facilis aliquid ipsam ipsum excepturi dignissimos minima tenetur
                    incidunt, maxime repellendus omnis quisquam placeat cumque officiis totam. Beatae iste debitis rem
                    quasi asperiores nemo quae?</p>
            </div>
            <a class="more"></a>
            <br>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-youtube"></i>
        </div>

        <div class="card">
            <div class="icon">
                <img src="img/img2.png" alt="">
            </div>
            <div class="content">
                <h3>Background Color Change Using CSS</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorem doloribus, atque consectetur
                    incidunt et reprehenderit cum, aliquam eaque inventore maxime excepturi doloremque adipisci. Soluta,
                    saepe. Illo quasi nulla delectus?
                    Ipsa quasi cum, nesciunt vel facilis aliquid ipsam ipsum excepturi dignissimos minima tenetur
                    incidunt, maxime repellendus omnis quisquam placeat cumque officiis totam. Beatae iste debitis rem
                    quasi asperiores nemo quae?</p>
            </div>
            <a class="more"></a>
            <br>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-youtube"></i>
        </div>

        <div class="card">
            <div class="icon">
                <img src="img/img3.png" alt="">
            </div>
            <div class="content">
                <h3>Employee Project Uisng Cpp</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorem doloribus, atque consectetur
                    incidunt et reprehenderit cum, aliquam eaque inventore maxime excepturi doloremque adipisci. Soluta,
                    saepe. Illo quasi nulla delectus?
                    Ipsa quasi cum, nesciunt vel facilis aliquid ipsam ipsum excepturi dignissimos minima tenetur
                    incidunt, maxime repellendus omnis quisquam placeat cumque officiis totam. Beatae iste debitis rem
                    quasi asperiores nemo quae?</p>
            </div>
            <a class="more"></a>
            <br>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-youtube"></i>
        </div>

        <div class="card">
            <div class="icon">
                <img src="img/img4.png" alt="">
            </div>
            <div class="content">
                <h3>YouTube Skeleton Loading Using CSS</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorem doloribus, atque consectetur
                    incidunt et reprehenderit cum, aliquam eaque inventore maxime excepturi doloremque adipisci. Soluta,
                    saepe. Illo quasi nulla delectus?
                    Ipsa quasi cum, nesciunt vel facilis aliquid ipsam ipsum excepturi dignissimos minima tenetur
                    incidunt, maxime repellendus omnis quisquam placeat cumque officiis totam. Beatae iste debitis rem
                    quasi asperiores nemo quae?</p>
            </div>
            <a class="more"></a>
            <br>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-youtube"></i>
        </div>
    </div>

    <script>
        let more = document.querySelectorAll('.more');
        for (let i = 0; i < more.length; i++) {
            more[i].addEventListener('click', function () {
                more[i].parentNode.classList.toggle('active')
            })
        }
    </script>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #313131;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.card {
    position: relative;
    width: 300px;
    padding: 20px;
    margin: 20px;
    background-color: #3f3f3f;
    border-radius: 25px;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border: 20px solid transparent;
    border-top: 50px solid #2b7be4;
    border-right: 48px solid #2b7be4;
}

.card.active::before {
    border: 20px solid transparent;
    border-top: 50px solid #0919f0;
    border-right: 48px solid #0919f0;
}

.icon {
    margin-bottom: 10px;
}

.icon img {
    max-width: 228px;
}

.card.active .content {
    height: auto;
}

.content {
    position: relative;
    height: 215px;
    overflow: hidden;
}

.content::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
    bottom: 0;
    background: linear-gradient(transparent, #3f3f3f);
}

.card.active .content::before {
    display: none;
}

.content h3 {
    color: #17e78c;
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 10px;
}

.content p {
    color: #ccc;
    font-weight: 300;
}

.card .more {
    position: relative;
    padding: 10px 15px;
    background: #1771e7;
    display: inline-block;
    text-transform: uppercase;
    color: #383838;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.card.active .more {
    background: #0919f0;
    color: #fff;
}

.card .more::before {
    content: 'Read More';
}

.card.active .more::before {
    content: 'Read Less';
}

.card a:hover {
    font-size: 14px;
    border: 1px solid #e8eff7;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

i {
    display: inline-block;
    padding: 20px;
    margin-left: -5px;
    margin-top: 2px;
}

.fa {
    padding: 10px 10px;
    cursor: pointer;
}

.fa-twitter {
    color: #0084b4;
}

.fa-facebook {
    color: #3b5995;
}

.fa-linkedin {
    color: #0077b5;
}

.fa-youtube {
    color: #ff0000;
}

SUBSCRIBE AND HIT BELL TO SEE NEW VIDEOS

Sagar Developer

Read More Read Less Using JavaScript | Full Responsive | Full Animation |

In the video, you have seen the demo of this and I hope you love it.

Source Code:

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Read More Read Less Using JavaScript | Full Responsive | Full Animation |

In the video, you have seen the demo of this and I hope you love it.

Source Code:

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form