logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Responsive Jquery Read More Feature Without Plugin

Responsive Jquery Read More Feature Without Plugin

August 11, 2016 2 comments Article SEO Website Designing

Responsive Jquery Read More Feature Without Plugin: Hi Friends, Today i will tell you about how to create a responsive read more feature of jquery without any plugin. As we know for creating a read more feature we have to add a jquery plugin but it increase our page speed. If you use less code of jquery, your page load faster.

Today i am creating a read more feature in the paragraph, firstly only few lines of paragraph are showing. After clicking on read more button your paragraph loads completely.

Responsive Jquery Read More Feature Without Plugin Live Demo:

See the live demo and download the code from below:

SEO Website Designing Live Demo      SEO Website Designing Download

How To Create Responsive Jquery Read More Feature Without Plugin:

For creating a responsive jquery read more feature, you can follow some steps. These Steps are

Step1:

Open your webpage in any code editor.

Step2:

Paste the below code to make the functionality of read more button on click.

HTML Code:

I have created some div in which content and button is there.

<div class="cont-box">
  <div class="box">
    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.
  </div>
  <div class="btn">
    Read More
  </div>
</div>

<div class="cont-box"> <div class="box"> 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. </div> <div class="btn"> Read More </div> </div>




CSS Code:

I am giving some styling of my read more button and content using css.

.cont-box {
  background: #1E90FF;
  color: #fff;
  padding: 30px;
  width: 50%;
  border:2px solid #000;
  margin: 20px auto;
  position: relative;
  font-size: 20px;
}
.cont-box .btn {
  color: #fff;
  padding: 5px 8px;
  background-color: #ff0000;
  position: absolute;
  right: 1px;
  bottom: 1px;
  margin-top: 5px;
}
.cont-box .box {
  height: 50px;
  overflow: hidden;
}
.cont-box .box.active {
  height: 100%;
}

.cont-box { background: #1E90FF; color: #fff; padding: 30px; width: 50%; border:2px solid #000; margin: 20px auto; position: relative; font-size: 20px; } .cont-box .btn { color: #fff; padding: 5px 8px; background-color: #ff0000; position: absolute; right: 1px; bottom: 1px; margin-top: 5px; } .cont-box .box { height: 50px; overflow: hidden; } .cont-box .box.active { height: 100%; }


Jquery Code:

Jquery code is giving a functionality of read more to open and close on just click on single button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".btn").click(function(){
  $('.box').toggleClass("active");
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(".btn").click(function(){ $('.box').toggleClass("active"); }); </script>

 

Step3:

After pasting all the codes, check your webpage in the browser.

For any problem you can see the live demo and download the code from below.

SEO Website Designing Live Demo      SEO Website Designing Download

Now you know how to create Responsive Jquery Read More Feature Without Plugin.

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

I hope you will like Responsive Jquery Read More Feature Without Plugin. If You found it useful please subscribe my blog.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: A Jquery Readmore Plugin With Responsive Web Design, CSS, CSS3, How to implement a "read more" link with jQuery, HTML, HTML5, jquery, responsive, Responsive Jquery Read More Feature Without Plugin

2 comments

  • Mena October 12, 2016 at 2:36 am - Reply

    Love this simple implementation of the read more. How do I have the button to display show less when the full text is shown?

  • SEO Website Designing October 12, 2016 at 8:58 am - Reply

    HI Mena,

    You have to write more code for this and specify more and less text in some variable and toggle the button when any user event is occurring

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.