How to set read more button using data from database in Laravel?

Hi friends, I want to add read more… button in my blade file where data is coming from database.

below is my code in blade file getalldata.blade.php

<ul class="text-justify">

In above Unordered list I am getting a long data from database and I want to add a Read more and Read Less toggle option. Now follow below steps to get your result now.


<ul class="text-justify">
	<li class="">
		<!-- <small>{{$users->pro_experience}}</small> -->
		@if(strlen($users->pro_experience) > 50)
			<span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
			<span class="read-more-content"> {{substr($users->pro_experience,50,strlen($users->pro_experience))}} 
			<span class="read-more-hide hide_content">Less <i class="fa fa-angle-up"></i></span> </span>

Javascript Code

<script type="text/javascript">
// Hide the extra content initially:
            $('.read-more-show, .read-more-hide').removeClass('hide_content')

            // Set up the toggle effect:
            $('.read-more-show').on('click', function(e) {
            $('.read-more-hide').on('click', function(e) {
              var p = $(this).parent('.read-more-content');
              p.prev('.read-more-show').removeClass('hide_content'); // Hide only the preceding "Read More"

CSS Code

<style type="text/css">
      color: #ed8323;
      color: #ed8323;

      display: none;

Resources :

  1. Click Here
  2. Click Here
Tagged : / / / / /