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

Post Views: 109

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">
	<li>
        <small>{{$users->pro_experience}}</small>
    </li>
</ul>

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.

getalldata.blade.php

<ul class="text-justify">
	<li class="">
		<!-- <small>{{$users->pro_experience}}</small> -->
		@if(strlen($users->pro_experience) > 50)
			{{substr($users->pro_experience,0,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>
		@else
			{{$users->pro_experience}}
		@endif
	</li>
</ul>

Javascript Code

<script type="text/javascript">
// Hide the extra content initially:
            $('.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();
            });
            $('.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>

CSS Code

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

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

Resources :

❓ Click Here
❓ Click Here

Author
Recent Posts

Chandan Kumar

Software Engineer at Cotocus PVT LTD.

Be a Full Stack Developer and eager to learn new Technology.
Knowledge: CSS, Bootstrap, Javascript, PHP, WordPress, Joomla, Moodle, Laravel, AJAX, Jquery, Java, Dart, Flutter, Photoshop, CorelDraw, Pagemaker
& Office Package