Home » Tutorials » Fade-in read more in JavaScript

Wednesday, 17 July 2013

Fade-in read more in JavaScript

By Muhammad Aseel at July 17, 2013 Labels: Fade, HTML, JavaScript, Tutorials

Fade in read more text is a very simple trick in JavaScript. It is very amazing and helpful trick, if you want to know that what is fade in read more text so below is a demo of this.

Demo:

My name is Muhammad Aseel.

Hope you understand what is fade-in read more in JavaScript. If you want to add this trick to your blog so just follow the below few steps.

Add fade in read more in JavaScript.

Go to your blog dashboard.
Then below any post and below any page paste the below code.

<script type="text/JavaScript" src="http://yourJavaScript.com/60172417532/jquery-fade-in.js"></script>
   <script type="text/JavaScript">
   $(document).ready(function() {

       $("span.spoiler").hide();

       $('<a class="reveal">Read more>></a> ').insertBefore('span.spoiler');

       $("a.reveal").click(function(){
           $(this).parents("p").children("span.spoiler").fadeIn(2500);
           $(this).parents("p").children("a.reveal").fadeOut(600);
       });

   });
   </script>
<style>
a.reveal { cursor:pointer;}
</style>

And then if you want to make any paragraph short just paste the below code before where you want read more.

<span class="spoiler">

And when you end your paragraph just paste the below code just after the paragraph.

</span>

Note:

when you are going to publish your article then click to HTML and add <p> tag before paragraph is starting and add </p> tag after </span> tag either it will not work.

For Example:

<p>This is a paragraph and now I want read more tag so I paste here <span class="spoiler"> and this paragraph will show when you click read more okay now my paragraph is finished so I add </span><p>.

Last words:

Hope you like this article and hope you will also share this article with your friends. If you having any trouble in adding fade in read more so don't worry just tell me your problem by your comment.