On click read more show text content Jquery PHP MYSQL fetch data

Description

Onclick link read more text hide text jquery.How to hide and show more text within a certain length.Jquery Read More and Less A smooth, responsive jQuery set in PHP Mysql for collapsing and expanding long content and text with Show link Read more and Close links.

Create A Dynamic on click link Read more and Close links Using PHP Mysql, Jquery Show Less and More Content Text onclick link php more and less toggle Link php mysql

 

<span class="more">

Lorem ipsum Content show for demo Lorem ipsum Lorem ipsum

</span>

<style>

.morecontent span {

    display: none;

}

.morelink {

    display: block;

}

</style>

<script>

$(document).ready(function() {

    // Configure/customize these variables.

    var showChar = 100;  // How many characters are shown by default

    var ellipsestext = "...";

    var moretext = "Show more >";

    var lesstext = "Show less";    

 

    $('.more').each(function() {

        var content = $(this).html();

 

        if(content.length > showChar) {

 

            var c = content.substr(0, showChar);

            var h = content.substr(showChar, content.length - showChar);

 

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

 

            $(this).html(html);

        }

 

    });

 

    $(".morelink").click(function(){

        if($(this).hasClass("less")) {

            $(this).removeClass("less");

            $(this).html(moretext);

        } else {

            $(this).addClass("less");

            $(this).html(lesstext);

        }

        $(this).parent().prev().toggle();

        $(this).prev().toggle();

        return false;

    });

});

</script>