Menu Close

How To Create Read More Read Less Button Using Jquery

Read more read less

Here, We will see how to create a read more and read less button using jquery. Some web pages have more content and it needs to hide some content for web page responsiveness.

So here, we need to separate the content into two parts. First part contains the visible content and the other part contains the invisible content. The read more button performs the hide and show function via jquery. Follow the below example to create this.

Example

Create the html file on your computer and place the below snippet on this file.

<!DOCTYPE html>
<html>
<head>
    <title>Read More Read Less Button Jquery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="moretext">
        <h3>Read More and Read Less Button</h3>
        <div class="more-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>
        </div>
        <div class="hide-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <button class="btn moreless-btn">Read more</button>
    </div>
</body>
    <script>
        $(document).ready(function(){
            $(".hide-content").hide();
            $(document).on('click', '.btn', function(){
                var moreLessButton = $(".hide-content").is(':visible') ? 'Read More' : 'Read Less';
                $(this).text(moreLessButton);
                $(this).parent('.moretext').find(".hide-content").toggle();
                $(this).parent('.moretext').find(".more-content").toggle();
            });
        });
    </script>
</html> 

Create an external stylesheet and link it to your html file to view better design.

html, body{
  padding: 20px;
  margin: 20px;
  overflow-x: hidden;
}

.moretext .moreless-btn{
    border:none;
    color:#1D267D;
    font-size:16px;
    margin:5px 5px;
    text-decoration:underline;
}

.moretext .moreless-btn:hover{
    color:#FC4F00;
}
 
.moretext p{
    font-size:16px;
    line-height:28px
}
 
Posted in HTML, jQuery, Web Technologies

You can also read...