Creating a “Show More / Show Less” feature in HTML is a popular way to manage content on websites. This functionality allows users to choose whether they want to see more content or keep it hidden, helping to keep web pages tidy and user-friendly. Here’s a simple step-by-step guide on how you can implement this feature using HTML, CSS, and jQuery.
Step1: HTML Text Structure with “Show More/Less” Functionality
This HTML snippet creates a content section (div.text) with text that is partially hidden and includes a “Show More” button. When clicked, this button can expand or collapse the text, allowing users to view more or less content as desire.
<div id="profile-description"> <div class="text show-more-height"> Some random text <br /><br /> At Cobalt we help people and businesses throughout the world realize their full potential. <br /> We make this simple mission come to life every day through our passion to create technologies <br><br>and develop products that touch just about every kind of customer. </div> <div class="show-more">(Show More)</div> </div><!-- [End] #profile-description -->
Step2: Styling the “Show More/Less” Elements
This CSS code configures the appearance and behavior of a “Show More” content section within #profile-description. It styles the text area to display partially, with the ability to expand, and designs a clickable “Show More” button that changes color on hover to enhance user interaction.
#profile-description {
max-width: 400px;
margin-top: 50px;
position:relative;
}
#profile-description .text {
/* width: 660px; */
margin-bottom: 5px;
color: #777;
padding: 0 15px;
position:relative;
font-family: Arial;
font-size: 14px;
display: block;
}
#profile-description .show-more {
/* width: 690px; */
color: #777;
position:relative;
font-size: 12px;
padding-top: 5px;
height: 20px;
text-align: center;
background: #32cddd;
cursor: pointer;
}
#profile-description .show-more:hover {
color: #1779dd;
}
#profile-description .show-more-height {
height: 65px;
overflow:hidden;
}Step3: JavaScript for Toggling Text Visibility
This jQuery script listens for clicks on the “Show More” button, toggling the text between “Show More” and “Show Less” based on the current state. It also toggles the class show-more-height on the .text element, which controls the visibility of additional content.
$(".show-more").click(function () {
if($(".text").hasClass("show-more-height")) {
$(this).text("(Show Less)");
} else {
$(this).text("(Show More)");
}
$(".text").toggleClass("show-more-height");
});Implementing Show More / Show Less Functionality in HTML: Code Example Demo
And there you have it! A simple and effective way to add “Show More / Show Less” functionality to your web pages, improving the user experience by managing content display efficiently. This feature is especially useful for longer blocks of text or expandable lists that you do not want to display fully by default.
