You are currently viewing Create Read More Read Less Using jQuery

Create Read More Read Less Using jQuery

Create Read More Read Less Using jQuery

Read More Read Less Using jQuery
Read More Read Less Using jQuery

 

Welcome🎉 to the CodeWithRandom blog. In this blog, we learn how to Create a Simple Read More / Read Less Button Using jQuery. We use HTML, Css, and jQuery for this Simple Read More / Read Less Button.
I hope you enjoy our blog so let’s start with a basic HTML structure for the Simple Read More / Read Less Button Using Jquery.
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

 

HTML Code For Read More Read Less

<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.

output

Read More Read Less Using jQuery
Read More Read Less Using Html Code Preview

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

Css Updated output


Read More Read Less Css
Read More Read Less Css

 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

jQuery Code For Read More Read Less

Cdn link For Jquery Code Run
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

Read More Read Less Using jQuery
Read More Read Less Using jQuery

 

Now that we have completed our Jquery section,  Here is our updated output with HTML, CSS, And JQueryHope you like the Simple Read Less and Read More Button Using Jquery.
 you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!

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 

Code by – Legendary

Leave a Reply