How to set read more button using data from database in php

Question

Actually I'm using laravel framework.In which I use certain queries and methods to retrieve data from database..

And its my code below

<ul class="booking-list">
    @foreach($aRooms as $aRoom)
        <li>
        ....
            <div class="comment more">
                {{$aRoom->room_desc}}
            </div>
        ....
        </li>
    @endforeach
</ul>

There are many contents to display like {{$aRoom->room_desc}}.But by using this {{$aRoom->room_desc}} I have to set the Read more Read less toggle option.

I don't know how to set that using jQuery,if the data is from database

And here is my jQuery,

<script>
$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "More (+)";
    var lesstext = "Less (-)";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

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

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<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>

Thanks,

Answer 1

I got it..using this link

<ul class="booking-list">
    @foreach($aRooms as $aRoom)
    <li>
        ....
        <div class="comment more">
            @if(strlen($aRoom->room_desc) > 100)
            {{substr($aRoom->room_desc,0,100)}}
            <span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
            <span class="read-more-content"> {{substr($aRoom->room_desc,100,strlen($aRoom->room_desc))}} 
            <span class="read-more-hide hide_content">Less <i class="fa fa-angle-up"></i></span> </span>
            @else
            {{$aRoom->room_desc}}
            @endif
            ....
    </li>
    @endforeach
</ul>

Javascript

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
            $('.read-more-content').addClass('hide_content')
            $('.read-more-show, .read-more-hide').removeClass('hide_content')

            // Set up the toggle effect:
            $('.read-more-show').on('click', function(e) {
              $(this).next('.read-more-content').removeClass('hide_content');
              $(this).addClass('hide_content');
              e.preventDefault();
            });

            // Changes contributed by @diego-rzg
            $('.read-more-hide').on('click', function(e) {
              var p = $(this).parent('.read-more-content');
              p.addClass('hide_content');
              p.prev('.read-more-show').removeClass('hide_content'); // Hide only the preceding "Read More"
              e.preventDefault();
            });
</script>

And for this I use some style in css file

<style type="text/css">
    .read-more-show{
      cursor:pointer;
      color: #ed8323;
    }
    .read-more-hide{
      cursor:pointer;
      color: #ed8323;
    }

    .hide_content{
      display: none;
    }
</style>