Simple Read Less and Read More Button Using Jquery | Read More Button Html Css







Simple Read Less and Read More Button Using Jquery | Read More Button Html Css 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create Simple Read Less and Read More Button Using Jquery. We use HTML, Css, and Jquery for this Simple Read Less and Read More Button Using Jquery. I hope you enjoy our blog so let’s start with a basic HTML structure for the Simple Read Less and Read More Button Using Jquery.

HTML 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 Less and Read More Button Using Jquery. Now, you can see an output with Simple Read Less and Read More Button Using Jquery then we write Jquery for Simple Read Less and Read More Button Using Jquery.

output

Simple Read Less and Read More Button Using Jquery | Read More Button Html Css

CSS code

 @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


Simple Read Less and Read More Button Using Jquery | Read More Button Html Css

Javascript(Jquery) code

Cdn link Jquery

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


Simple Read Less and Read More Button Using Jquery | Read More Button Html Css


Now that we have completed our Jquery section,  Here is our updated output with 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 Jquery 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

Share on:

Leave a Comment