Create Read More Read Less Using jQuery (Source Code)

<h1 align="center">What is CSS?</h1>
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language.Although most often used
to set the visual style of web pages and user interfaces written in HTML and
XHTML, the language can be applied to any XML document, including plain XML, SVG
and XUL, and is applicable to rendering in speech, or on other media.
<div>
    <br />
    <span id="text"
        >CSS is designed primarily to enable the separation of document content
        from document presentation, including aspects such as the layout,
        colors, and fonts. This separation can improve content accessibility,
        provide more flexibility and control in the specification of
        presentation characteristics, enable multiple HTML pages to share
        formatting by specifying the relevant CSS in a separate .css file, and
        reduce complexity and repetition in the structural content. <br />
        <span class="source">Source:</span
        ><a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets"
            >Wikipedia</a
        >
    </span>
</div>
<div class="btn-container"><button id="toggle">Read More</button></div>

There is all the HTML code for the Simple Read More / Read Less Button. Now, you can see output without Css And jQuery. then we write Css & JQuery Code for Simple Read Less and Read More Button.

How to Create Popup Form Using HTML & JavaScript?

CSS Code For Read More Read Less

@import url("https://fonts.googleapis.com/css?family=Raleway");
#text {
    display: none;
}
.btn-container {
    margin: auto;
    height: 44px;
    width: 166.23px;
}
a:active {
    color: #ffd323;
}
body {
    background-color: #000;
}
button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    border: none;
    padding: 8px;
    font-size: 20px;
    background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    color: white;
    font-family: cursive;
    box-sizing: border-box;
}
body {
    font-family: "Raleway", monospace;
    font-size: 20px;
    color: white;
}

Responsive Login Page in HTML with CSS Code

jQuery Code For Read More Read Less

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

$(document).ready(function () {
    $("#toggle").click(function () {
        var elem = $("#toggle").text();
        if (elem == "Read More") {
            //Stuff to do when btn is in the read more state
            $("#toggle").text("Read Less");
            $("#text").slideDown();
        } else {
            //Stuff to do when btn is in the read less state
            $("#toggle").text("Read More");
            $("#text").slideUp();
        }
    });
});

Final Output Read More Read Less With jQuery Code

In this post, we learn how to create a Simple Read Less and Read More Button Using simple HTML & CSS, and JQuery If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki